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!

lighten is sass's native function, $color is just the first parameter name. The code is: color: lighten(var(--textColor), 10%) — Dan R.
– Dan R., Commented Apr 24, 2019 at 12:16
Apparently Sass can't handle CSS variables; but what's wrong with using Sass variables? — Mr Lister
– Mr Lister, Commented Apr 24, 2019 at 17:31
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/… — Jeyenth
– Jeyenth, Commented May 2, 2019 at 5:17

Kelvin Lai · Accepted Answer · 2019-05-02 04:17:00Z

9

+25

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.

edited May 2, 2019 at 4:17

answered May 1, 2019 at 6:22

Kelvin Lai

2,2897 gold badges24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan R. Over a year ago

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

Kelvin Lai Over a year ago

@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().

Tek choudhary · Accepted Answer · 2019-04-30 06:43:51Z

0

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.

edited Apr 30, 2019 at 6:43

answered Apr 30, 2019 at 6:29

Tek choudhary

1781 silver badge6 bronze badges

2 Comments

P Varga Over a year ago

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

Dan R. Over a year ago

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

Pranil Tunga · Accepted Answer · 2019-05-01 08:09:40Z

0

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.

answered May 1, 2019 at 8:09

Pranil Tunga

767 bronze badges

Collectives™ on Stack Overflow

Using css variables in sass functions - node-sass

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related