Question about SCSS/SASS variables

HTML & CSS
1

Hi,

Usually when I use variables in SASS I have a structure looking something like this:

_variables.scss
_header.scss
_footer.scss
main.scss

In main.scss I import the partials.

However, I would like to do like this:

variables.scss
_header.scss
_footer.scss
main.scss

I want to have variables.scss as a separat stylesheet that i load before main.scss (variables.css and main.css in my head section. The reason for this is that I am working on a “multi-site”, which could have different colors etc depending on what variables stylesheet is loaded (it is going to have several, like variables1.css , variables2.css etc.). In variables1.css a variables named $bgcolor could be equal to #fff, but if variables2.css was to be loaded, the $bgcolor might be #eee for example.

The problem is when I load variables as a separat stylesheet i get the error “syntax error: undefined variables…”

Anyone know how I could solve this?

2

In my screen.scss (that would be main.scss in your case), I have @import for every _filename.scss file, so for your files, it would look something like that:


@import '_variables.scss';
@import '_header.scss';
@import '_footer.scss';

And in head section, you only include main.css. In case of different colorset, you’ll just replace _variables.scss with different variables file.