CODEWITHSUNDEEP
csscss-variables
Med EL
Med EL

Reputation: 25

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

Upvotes: 1

Views: 467

Answers (1)

Maik Lowrey
Maik Lowrey

Reputation: 17594

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

Upvotes: 2

Related Questions