13

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 node-sass@4.11.0 and sass-loader@7.1.0 (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!

P Varga
  • 19,174
  • 12
  • 70
  • 108
Dan R.
  • 638
  • 5
  • 13
  • 1
    Did you declare the color of `$color` somewhere? – Corné Apr 24 '19 at 06:46
  • 1
    Can you provide the code that causes the error? – Mr Lister Apr 24 '19 at 08:19
  • 1
    `lighten` is sass's native function, $color is just the first parameter name. The code is: `color: lighten(var(--textColor), 10%)` – Dan R. Apr 24 '19 at 12:16
  • Apparently Sass can't handle CSS variables; but what's wrong with using Sass variables? – Mr Lister Apr 24 '19 at 17:31
  • Makes app theming more convenient :) – Dan R. Apr 24 '19 at 22:57
  • Where is `--textColor` defined? – P Varga Apr 30 '19 at 06:47
  • 1
    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. https://medium.com/@amcdnl/theming-angular-with-css-variables-3c78a5b20b24 – Jeyenth May 02 '19 at 05:17
  • 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. – Dan R. May 03 '19 at 08:28

3 Answers3

9

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.

Kelvin Lai
  • 2,209
  • 7
  • 24
  • 26
  • https://github.com/sass/libsass/issues/2561 some of it was already implemented I guess – Dan R. May 01 '19 at 20:30
  • @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()`. – Kelvin Lai May 02 '19 at 04:03
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.

Tek choudhary
  • 150
  • 6
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.

Pranil Tunga
  • 76
  • 7