What does Slate's CSS Var Loader do?

Solved
Highlighted
Excursionist
12 3 3

Hey all,

 

Can someone please explain to me what CSS Var Loader, within Slate, is meant to do?

 

The docs say:

 

Finds CSS custom properties (variables) in your stylesheets and replaces them with their corresponding Liquid variable found in the provided cssVariablesPath option.

 

But I don't quite understand it. Any liquid code is turned into HTML when the server compiles it so why is this necessary? Is this a way to support the browsers that don't natively support CSS Variables?

 

Can someone explain what it does and why someone would use it?

 

Thanks in advance!

0 Likes
Excursionist
12 3 3

Bump

0 Likes

Success.

Excursionist
12 3 3

Ok, I think I figured it out.

 

SCSS can't compile Liquid code so you can't use liquid in your SCSS files. To get around this we use CSS Variables that are assigned to our liquid variables. This allows the SCSS to compile (since it accepts CSS variables) and when it has a nice compiled CSS file it calls the infamous CSS Var Loader.

 

It goes through your compiled CSS files and finds occurrences of the CSS variables defined in your `css-variables.liquid` file (using some clever regex) and replaces them with the liquid variables assigned to those CSS variables set in the same file.

 

This makes sense since not all browsers... *cough* Internet Explorer *cough*... support CSS Variables. And it also means you can compile your SCSS files and still have your liquid variables in there. 

 

TLDR: Turns the CSS Variables in your CSS files into liquid variables to help browsers that don't support them.

0 Likes