Menu
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!
402
Sass variables are all compiled away by Sass. CSS variables are included in the CSS output. CSS variables can have different values for different elements, but Sass variables only have one value at a time.
Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.
Declaration of a variable in SASS: In SASS, you can define a variable by using $ symbol at the starting of the name of the variable and followed by its value. Understanding scope of a variable: SASS variables can be declared anywhere in the document before it is used.
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). The expected output is impossible because rgba (color, alpha) is a Sass function. The color argument must be a Sass Color type.
The example which used a CSS variable failed. Using SASS’s rgba () function with CSS variables fails to be rendered correctly. According to the official CSS spec, “the values of custom properties are substituted as is when replacing var () references in a property’s value”.
Also, if you use Sass, your CSS code will be compatible with all versions of browsers. Sass also makes it possible to reuse your code by creating variables and functions with mixins (cutting up pieces of code) that can be reused over and over again.
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.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
