Search code examples
csscss-variables

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);
  }
}
Solution

  • 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!?