6

I tried this:

:root {
  --primary-color: $black
}

$secondary-color = "lighten(%s, 20%)" % var(--primary-color)

(I took it from here: How to use a Stylus variable in calc?)

I don't receive any errors. However, $secondary-color doesn't render any color.

What's the best way of doing this?

The result is this:

background-color: lighten(var(--primary-color), 20%) so I think something is not rendering well.

alex
  • 7,111
  • 15
  • 50
  • 77
  • I think you missed a `;` after `$black` which is why Stylus misinterprets it. And black is not a good variable name as it is also a html color code (shouldn't matter because of the `$`). Is it defined before or did you want simply `black`? – Stony Aug 11 '18 at 21:29
  • @alex I have the same problem where I cannot write `alpha(var(--primary), .6)` it bugs for me when I do this. Did you ever find a solution? – mesqueeb Apr 11 '19 at 02:23

1 Answers1

1

This is not going to work because 1. lighten is a pre-processor function that's executed at compile-time while interpolation is just passing through all the stuff and 2. lighten isn't supposed to work with css variables at all because it's extracting numerical values from a color in order to compute another color at compile-time which in case of a css variable just isn't known at that time and furthermore 3. in css this isn't even possible with a css variable containing a full color definition and so a pre-processor couldn't do either: in order to make color mixing work at run-time you would need to break it up like var(--primary-h), var(--primary-s) and var-primary-l and use calc to operate on the values separately.

Rafael Nowrotek
  • 11
  • 1