Version 3.0 of the Store Editor now works in conjunction with CSS. Not only can you create CSS files as objects within the Store Editor, you can also reference variable values from the Variables page for use in your CSS files.

What is a Referenced Variable?

Along with the ability to create CSS objects directly in the Store Editor, you can interpolate the values of any variable in your CSS file. What this means is the CSS file that you create will have code the references the names of variables (either standard or custom). When your CSS file is generated, the values stored for those variables being referenced on the Variables page, will get pulled into the CSS file so the generated version has the actual value.

Example:

Suppose your Variables page has the following value for the standard variable controlling the background color of the header region:

Header-background-color: #000000

When you view the css-base file (one of the standard CSS files included in all templates), you would see code similar to the following:

#header {background: $header-background-color}

But in the generated CSS file you would see:

#header {background: #000000}

In the above example, you can see how the value for the variable (#000000, the hexadecimal color code for black) is referenced in the CSS file ($header-background-color) and then in the generated CSS file used by the page, the actual color value is used.

You can create your own custom variables and reference them in the CSS files for your site. You must place the dollar sign ($) before the variable name in order for the generated file to pick up the value for the variable.