'Can i use classes to change css variables?

Can I use classes to change CSS variables in SCSS file? it works but I want to know if it's the right way to do it:

.header {
  --transform: translate(-50%, 0);
  transform: var(--transform);
  &--hide {
     --transform: translate(-50%, -84px);
  }
  &--show {
     --transform: translate(-50%, 0);
  }
}

// instead of this:

.header {
  transform: translate(-50%, 0);
  &--hide {
     transform: translate(-50%, -84px);
  }
  &--show {
     transform: translate(-50%, 0);
  }
}
csscss-variables


Solution 1:[1]

Yes you override in your class the css variable like that:

:root {
  --test: red;
}    
.header {    
  --test: green;
  color: var(--test);       
}
<div class="header">abc</div>

Note:: But I can't imagine a use case right now!?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maik Lowrey

Related Questions