1

I want to user var(--darkGrey). So far I have tried this:

$grey: #ddd; // I'd like to remove this line
:root {
  --grey: #ddd;
  --darkGrey: darken($grey, 55%); // doesn't fail but doesn't work
  --darkGrey: darken(#ddd, 55%); // doesn't fail but doesn't work
  --darkGrey1: #{darken($grey, 55%)}; // works but I don't like having a Sass var
  --darkGrey2: #{darken(var(--grey), 55%)}; // fails: "var(--grey)" is not a color for `darken'
  --darkGrey3: #{darken(#ddd, 55%)}; // works but I'd need to use a css var. I have plenty of colors and references
}
Dani
  • 3,128
  • 2
  • 43
  • 91

1 Answers1

0

I'd say it does not make much sense to use CSS custom property (variable) in Sass function. CSS custom properties could be changed deeper in your CSS structure or even during the runtime, while Sass is available only during compile time. It could not react to such change.

Have a look at hsla() CSS function, which can be used to change lightness of colors during runtime. See article https://sparanoid.com/note/css-variables-guide/.

crazko
  • 831
  • 8
  • 18
  • that looks good but I can't find an easy way to make the color darker. Found this `filter` property but that applies a filter to the whole div including child elements – Dani Sep 28 '20 at 14:34
  • but well, that's a different matter anyway. The main problem is fixed – Dani Sep 28 '20 at 15:03