Use CSS variables and Sass mixing together without Sass vars

Question

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
}

that works also but I don't only have a color reference I have many other colors using other variables so I don't want to repite any of them. — Dani, Sep 28 '20 at 11:50

score 0 · Accepted Answer · answered Sep 28 '20 at 11:53

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/.

answered Sep 28 '20 at 11:53

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

Use CSS variables and Sass mixing together without Sass vars

1 Answers1