Can i use classes to change css variables?

Question

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

thank you for your answer. I tried it and it works, I'm using it for a navbar animation when I scroll up the navbar slide down — Med EL
– Med EL, Commented Apr 9, 2022 at 15:57

Maik Lowrey · Accepted Answer · 2022-04-09 15:47:45Z

2

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

answered Apr 9, 2022 at 15:47

Maik Lowrey

17.8k8 gold badges55 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Med EL Over a year ago

thank you. I'm using it for a navbar animation when I scroll up the navbar slide down

Collectives™ on Stack Overflow

Can i use classes to change css variables?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related