Menu
I would like to use scss lighten() and darken() function with CSS4 var.
Like this :
box-shadow: inset 0px -2px 50px 45px darken(var(--colorbtn),20%);
It seems not working, gulp write this:
Error: $color: "var(--colorbtn)" is not a color for `darken'
Its not possible to do that?
765
SASS is a CSS extension that lends superpower and elegance to this formal simple style language. SASS gives you the ability to use variables, nested rules, mixins, inline imports, and more, all with fully CSS-compliant syntax.
$color-red: #FF0000; $color-green: #00FF00; $color-blue: #0000FF; Remember, in order to use variables, or any of the benefits of SCSS for that matter, the stylesheet must have the '. scss' extension, and a preprocessor must be part of your website build system.
SCSS is compiled to CSS during compile time, and SCSS variables are replaced with resolved value during compile time, which means there is no way to change the variable during run time. However, CSS variables just sits there during run time, and you can dynamically CRUD them during run time with JavaScript (Web API).
A Sass variable must be initialized with a value. To change the value, we simply replace the old value with a new one. A variable that's initialized inside a selector can only be used within that selector's scope. A variable that's initialized outside a selector can be used anywhere in the document.
This can't really work because SASS is a preprocessor, and CSS custom properties can be dynamically changed at run-time. For SASS to be able to preprocess this with darken, it would have to replace the custom property with a static value, in which case the usefulness of the custom property is lost.
135
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
