Is there any way to use @if in a Theme Component using a variable?

Dev
1

I’m trying to use a boolean theme setting to determine if I can use a specific set styling:

@if var(--my-variable) {
   .my-selector {
      display: block;
  }
}

and elsewhere in included file:

:root {
  --my-variable: #{$my_boolean_setting_in_theme};
}

but this doesn’t appear to work …

the styling is applied whether or not the variable is true or false.

3 Likes
2

Runtime CSS variables like --my-variable can’t be consumed in SASS/SCSS build-time @if statements.

So I think you’d have to handle this entirely at build-time, sticking to SCSS variables only. Something like:

@if $my_boolean_setting_in_theme == "true" {
  ...
}
4 Likes
3

thanks David, I tried all sorts of combinations like that, don’t know why I didn’t hit upon that one, cheers!

3 Likes