0

How can you check if a CSS variable is equal to a value.

default.scss

:root {
    --default-direction: ltr; 
}

right.scss

:root {
   --default-direction: rtl; 
}

I wanted to add some cases in main.scss based on this CSS variable value. I want something like the below code snippet. Is it possible to check variable value and how to do so?

main.scss

@if(var(--default-direction) == rtl) {
   $flex-direction: row-reverse;
}
react_or_angluar
  • 1,568
  • 2
  • 13
  • 20
Soojoo
  • 2,146
  • 1
  • 30
  • 56
  • https://stackoverflow.com/questions/1129699/can-you-use-if-else-conditions-in-css – react_or_angluar Dec 17 '20 at 12:58
  • No help as I need this check only scss without any server side support. – Soojoo Dec 17 '20 at 13:16
  • Selectors are themselves condition in a way, if it matches-> rules are applied. But what you try to do seems much more simple, You want to reverse the flow if direction is rtl ? in that case, set a static direction right to your flex box. so it remains always in the same direction whatever the var() value is. – G-Cyrillus Dec 17 '20 at 13:18
  • I wanted to define some scss variables based on direction. Since the direction changes dynamically based on country selection, I want to change the scss variable values and use it in all scoped styles of different components. Thats why needed a condition check in this case. – Soojoo Dec 17 '20 at 13:31
  • I guess you need to make it first a var for scss $direction for example so you can test before compilation and then update your css var(). – G-Cyrillus Dec 17 '20 at 13:35
  • Tried that as well, but it doesn't help as I'm unable to check the updated value. What I need is, for example if the direction is rtl then I have a variable $paddingStart: right; and for ltr direction $paddingStart: left;. I'm want to use this variable in my child components like padding-#{$paddingStart}: 10px; – Soojoo Dec 17 '20 at 13:46

1 Answers1

0

How I do it is creating a mixing rule for rtl:

@mixin rtl {
    body:lang(ar) &{
      @content;
    }
  }

With that mixin you can start creating your rules:

.flexbox {
  flex-direction: row-reverse;
    @include rtl {
  flex-direction: row-reverse;
  }
}
Miguel Esquirol
  • 56
  • 5