Custom css properties in lighten/darken scss function

Question

as the question suggested, I want to use custom css colors (with --color*) inside a lighten/darken function. The reason is that I have an Ionic application and I want to change the theme colors dynamically, something like this:

--ion-color-primary: #fff;
--ion-color-primary-rgb: 255, 255, 255;
--ion-color-primary-contrast: #000);
--ion-color-primary-contrast-rgb: 0, 0, 0;
--ion-color-primary-shade: darken(var(--ion-color-primary, 30);
--ion-color-primary-tint: lighten(var(--ion-color-primary, 30);

I am receiving the primary and primary-contrast css properties from other place and I want to be able to set the shade and tint dynamically based on them. With the code above, I received an error saying $color: var(--ion-color-primary) is not a color.

Code snipper

Post the snippet of code where you use the --ion-color-primary variable, please. — Pine Code

umbex umbex · Accepted Answer · 2020-10-20T14:29:38

There is a breaking change in Sass since v3.5.0 where you need to write your sass variables and functions within interpolation.

To provide maximum compatibility with plain CSS, more recent versions of Sass require SassScript expressions in custom property values to be written within interpolation. Interpolation will also work for older Sass versions, and so is recommended for all stylesheets.*

Therefore your code should look like this:

$primary: aqua;
--ion-color-primary-shade: #{darken($primary, 30%)};
--ion-color-primary-tint: #{lighten($primary, 30%)};

For the best effect to achieve consider using scale-color() instead of darken/lighten:

The lighten() function increases lightness by a fixed amount, which is often not the desired effect. To make a color a certain percentage lighter than it was before, use scale() instead.**

$primary: aqua;
--ion-color-primary-shade: #{scale-color($primary, $lightness: -30%)};
--ion-color-primary-tint: #{scale-color($primary, $lightness: 30%)};

*For more info about sass interpolation see https://sass-lang.com/documentation/breaking-changes/css-vars.

**For more details on scale-color: https://sass-lang.com/documentation/modules/color#scale

Custom css properties in lighten/darken scss function

1 Answers