Dynamically add css variable color from javascript to Sass Functions

Question

I'm trying to add dynamic color through javascript using css variables and then trying to use sass functions for that color, but i'm getting errors as sass is precompiled first. What is the other approach i can follow here? I'm okay to add any plugin or write a code in css for this particular part of code. Can any one please help me with this? I'm adding an example code pen for this particular issue i'm facing. Thanks in advance!

//code for SCSS file:

@import "compass/css3";
$color: var(--primary-color, #ffc53a);
$light: lighten(#{$color},50%);
$dark: darken($color,15%);
$lighter: lighten($color,30%);
$darker: darken($color,30%);

body {
  text-align: center;
  padding-top: 1em;
}

p {
  color: $color; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2em;
    
  &.light { 
    color: $light;
  }
  &.dark { 
    color: $dark;
  }
  &.lighter { 
    color: $lighter;
  }
  &.darker { 
    color: $darker;
  }
}

//code for JS file:
document.documentElement.style.setProperty('--primary-color', '#3cb878' );

Getting the following error:

"$color: "var(--primary-color, #ffc53a)" is not a color for `lighten'"

https://codepen.io/uidev5999/pen/RwKWjBj

Thanks

Answer 1

If you are looking for a solution in SASS the fastest answer to help you is:
IT INDEED IS NOT POSSIBLE.

As you described yourself, SASS is a pre processor: It CANNOT work with the values of CSS variables or with dynamic values from JS which are set/changed in the browser process when the work of SASS is over and SASS is not involved anymore. So you get an error if you try to use values of dynamic CSS variables in SASS at all.

THINKING FORWARD -
WHAT IS POSSIBLE: DOING COMPLETE DYNAMIC COLOR MANAGEMENT IN JS

If you indeed need to use dynamic colors by JS, you could implement complete dynamic color management in JS to prepare, manipulate (including lighting/darkening the colors), and set them to the elements in JS itself.

Indeed in your example, you started doing exactly this when you defined a css variable with a color value and assigned it to the :root element with JS: document.documentElement.style.setProperty('--primary-color', '#3cb878' );. In this way you are able to overwrite the colors which are set in SASS by writing them as CSS-Color-Variables.

Following this method, an approach to solve your question could be:

1. Setup your basic standard colors in css variables and assign all CSS color variables to :root.
2. Use these CSS variables for styling your elements.
   NOTE: you can still use SASS: even though you cannot use SASS variables with the values of CSS variables, you are able to write CSS variables in SASS instead of using SASS variables!
3. Do additional dynamic color management in JS and overwrite the css variables by using your technique.

Here are two links which may help:

Manipulating colors in JS:
https://blog.logrocket.com/how-to-manipulate-css-colors-with-javascript-fb547113a1b8/

Reading CSS variables in JS:
Access CSS variable from javascript

---

Additional hint / explanation: If you need color manipulation in SASS you can only do it on your known colors ...

// SASS example color manipulation to advise colors to css vars
$color_primary: #0000ff;
$color_primary_light: lighten($color_primary, 0.5);

:root {
    --color-primary: #{$color_primary};
    --color-primary-light: #{$color_primary_light};
} 


// alternative: manipulate known color in CSS variable itself 
$color_primary: #0000ff;

:root {
    --color-primary: #{$color_primary};
    --color-primary-light: #{lighten($color_primary, 0.5)};
} 

// but you are not able to manipulate css variables in SASS
// SO THIS IS IMPOSSIBLE ANYWAY:
:root {
    --color-primary: #{$color_primary};
    --color-primary-light: #{lighten( var(--primary) ), 0.5)};
}