CODEWITHSUNDEEP
cssreactjssass
crevulus
crevulus

Reputation: 2428

sass:color failing when hardcoded values work fine

I just added sass to my create-react-app project. When I hardcode colour values, the styling is updated accordingly. But when I try to make use of some scss methods, the new styles are ignored.

e.g. This works fine...

:root {
  --title-blue: #2086c3;
}

...This does not...

$color-test: black !default;

:root {
  --title-blue: mix($color-test, white, 50%);
}

...neither does this

:root {
  --title-blue: $color-test
}

I can import the newly-renamed .scss files and all the styling remains consistent, so I don't think this is a compilation error.

Any ideas why this might be? I'm using node-sass v4.14.1 because node sass 5 was giving me a react error.

Upvotes: 0

Views: 164

Answers (1)

Rodrigo
Rodrigo

Reputation: 481

I think you can try

$color-test: #000000;

:root {
    --title-blue: #{$color-test};
}

A couple of years ago Sass stopped supporting the assignment of Sass variables to CSS variables. It seems that it was never intended to support it and, it was a bug that violated the SASS language spec. Using string interpolation solves this problem.

You can read more about it in this Github issue of the Sass language:

https://github.com/sass/node-sass/issues/2336

Upvotes: 1

Related Questions