Scss: Override Variables

Question

Is there a way to override variables in SCSS without mixins or functions? My setup looks like this:

Input:

$color: red !default;

selector {
  color: $color;
}

$color: blue;

Output:

selector {
  color: red;
}

I already tried to use !global but this does not work either. I am not sure, if this is even possible in SCSS without using mixins.

Possible duplicate of [How to overwrite SCSS variables when compiling to CSS](https://stackoverflow.com/questions/17089717/how-to-overwrite-scss-variables-when-compiling-to-css) — Mohammed Wahed Khan, Nov 10 '17 at 11:58

score 1 · Answer 1 · answered Aug 07 '18 at 20:37

1

You need to set the variable before it gets declared with !default. To achieve the result you want your code needs to look like this:

$color: blue;

$color: red !default;

selector {
   color: $color;
}

Here is some info about how !default works.

answered Aug 07 '18 at 20:37

iicaptain

1 Answers1