Question

In my rails application’s asset application.css I have the following line

/*
 *= require foundation_and_overrides
 *= require_self
 *= require_tree .
 */

ul#mainmenu li {
    background-color: $mainColor;
}

which includes the file foundation_and_overrides.scss where I defined the following variable

$mainColor: #eba10e;

But when I now try to use this variable directly in my application.css file, it is not translated to #eba10e, so I get lines like this one in the resulting css file:

background-color: $mainColor;

So my question, how can I use the variable in my application.css file?

Answer 1

No, pure CSS does not support variables.

But it will work, if you rename it to application.scss. After that it will be compiled with Sass. CSS is always valid SCSS, so this will work without problems.

Additionally you have to use the @import statement instead of require, so the other files will be imported the ”SASS way“.