Change SCSS variable value on final file

Question

I have two files: _partial.scss which is imported by file.scss.

I have some variables on _partial.scss, and I want to change the values of the variables in file.scss but the changes aren't showing up.

Let's say I have $var: #000000; in _partial.scss. If I try to do $var: #AAAAAA; on file.scss the value of the variable does not change.

What am I doing wrong?

The code:

_partial.scss:

 $var: #FFFFFF;

 body {
   color: $var;
 }

file.scss:

 $var: #000000;
 @import 'partial';

The ouput is:

 body {
   color: #FFFFFF;
 }

I want it to be

 body {
   color: #000000;
 }

Answer 1

There is no good way around this without modifying your _partial.scss file.

If you want to have default variables, that you can override on @import you need to use them with !default:

_partial.scss:

 $var: #FFFFFF !default;

 body {
   color: $var;
 }

file.scss:

 $var: #000000;
 @import 'partial';

Output CSS:

 body {
   color: black;
 }

Otherwise whichever value is assigned last overrides the one before.

Another option is to define all variables in a separate file (e.g. _variables.scss) outside of _partial.scss ... then you can override/modify them (for example directly in file.scss if you wish) before importing _partial.scss.