Sass variables are not being read in code

Development

AI-generated summary

In a Discourse theme development thread titled ‘Sass variables are not being read in code,’ user darkpixlz reports that Sass @if conditions involving boolean theme settings (e.g., $Full_Width == true) are not functioning as expected — the code either never runs or always runs regardless of the setting’s value. Canapin confirms encountering the same issue and shares the official Sass docs link, but notes the syntax isn’t behaving as documented. darkpixlz reiterates the problem persists even with correct syntax. awesomerobot suggests comparing the variable to the string 'true' instead of the boolean true, which darkpixlz confirms resolves the issue — implying theme settings are passed as strings, not booleans. The fix sparks relief and broader application: Canapin and merefield note it solves long-standing issues in their own theme components, including dark theme switching. Canapin humorously credits the solution for helping an entire community, accompanied by a celebratory GIF.

1

Hello,

When adding more settings to my theme, it started to become apparent Discourse was ignoring them.

Code:


#main-outlet-wrapper .sidebar-wrapper {
  @if $Full_Width == true {
    left: 10px;
  }
}

@if $Full_Width == true {
  :root {
    --d-max-width: 95%;
  }
  #main-outlet {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 50px;
  }
}

This code doesn’t do anything, no matter the value of the setting.

However, if I remove == true, it’ll always be enabled no matter what.

This also seems to be the issue with any other bool? I read the sass docs and my code matches and it still does not work.


div#main-outlet.wrap.not-found-container,
#main-outlet-wrapper {

  #main-outlet,
  .sidebar-wrapper {
    @if $Is_Background_Blurred {
      backdrop-filter: blur(3rem) !important;
      background-color: #0a0a0aa6 !important;

      input[type],
      .select-kit.combo-box .select-kit-header,
      .d-editor-textarea-wrapper,
      div.ac-wrap {
        background: transparent;
      }
    }

    @else {
      backdrop-filter: none !important;
      background-color: var(--secondary) !important;

      input[type],
      .select-kit.combo-box .select-kit-header,
      .d-editor-textarea-wrapper,
      div.ac-wrap {
        background: transparent;
      }
    }
  }
}

Thanks for any help.

2

I encountered the same issue a few weeks ago and concluded that the if SASS condition wasn’t working as I thought. I’d be very happy to know if such a thing is possible though:

Having “if this site_setting == value then” in a SASS file.

I’m just putting this here in case it would be of any usefulness:

3

I had a look here before I made my post, and my code is the exact same.

Doing @if $var {} will always run it no matter the value, and @if $var == true {} will never run it.

4

Have you tried:

@if $var == "true"

It’s possible the boolean is actually a string, I’ve run into this with theme components before.

5

Yep, seemed to fix it, strange.

6

Awesome, you both helped me figure out a thing I had given up on in one of my theme components. :v:

7

This may fix the dark theme switching we discussed recently, thanks.

It was not working as is.

8

And just like that, Kris helped an entire population.