Using css variables in sass functions - node-sass

Question

I am trying to use CSS variables in an Angular project together with Sass functions (lighten() / darken() to be precise), and as far as I know, the latest version of LibSass allows it.

I have installed [email protected] and [email protected] (and on Angular v7.3.0), but yet I receive an error

Argument $color of lighten($color, $amount) must be a color

Am I missing something?
Thanks!

Tissue

Did you declare the color of $color somewhere? – Chandelier

Can you provide the code that causes the error? – Gaines

lighten is sass's native function, $color is just the first parameter name. The code is: color: lighten(var(--textColor), 10%) – Tissue

Apparently Sass can't handle CSS variables; but what's wrong with using Sass variables? – Gaines

Makes app theming more convenient :) – Tissue

Where is --textColor defined? – Footrope

Basically, you cant use the sass function after compilation, I believe your requirement is you change the color from Angular. Your best bet is to use the CSS variables, check the following article you could get some cue. medium.com/@amcdnl/… – Abdu

Actually I am already following the same patternike the article but I want to set all the color variables that are currently used to the css custom props - and they are already used with lighten/darken funcs across the system. – Tissue

Answer 1

Unfortunately you can't... lighten is a SASS function at compile-time, while CSS variables are run-time variables.

You can make a SASS variable into a CSS variable, but not the other way round.

To conclude, if you need to call SASS functions, just use SASS variables (as arguments to those functions).

More explanations from the maintainer of node-sass:
https://github.com/sass/node-sass/issues/2251#issuecomment-372009293

The expected output is impossible because rgba(color, alpha) is a Sass function.
The color argument must be a Sass Color type.
Sass does not evaluation css custom property values, because these are run-time variables.

Weismann

github.com/sass/libsass/issues/2561 some of it was already implemented I guess – Tissue

@DanR. even if SASS maintainers can implement it correctly, it will only ever gonna work with CSS functions like rgb(), rgba(), hsl(), and hsla() but not any other SASS function like lighten() or darken(). – Weismann

Answer 2

How about using SASS variable instead of css variable. If you define SASS variable $color then use it in your sass lighten function should fix this error.

Deviationism

Indeed, but the question is about using CSS variables in Sass – Footrope

I know that but it's not my purpose. CSS vars are more consistent and can be manipulated in JS unlike SCSS cars. – Tissue

Answer 3

Sass doesnt allows us to use css variables simply use the sass variable and pass it on lighten function as u know the sass compiler will automatically converts it to the css and manages automatically. I think this will solve your problem $color or any variable to your sass and use it inside the lighten() function.

Hixon