CODEWITHSUNDEEP
sassblueprintjs
sapphyra
sapphyra

Reputation: 77

Blueprint.js dynamic $ns variable in scss

I'm using Blueprint.js v3.x and have been making use of the SASS variables. I want to leverage the $ns variable, but my app is in dark mode. The $ns variable is set to bp3 !default; on line 10 of the file above, which from what I understand means I can set it to a different value in my app.scss. It would be fine, then, to just set $ns: bp3-dark; and use this variable that way. However, in the future I want to support a dark/light mode switch; how can I, following best practice, dynamically set $ns to be the correct value based on said switch?

Upvotes: 0

Views: 399

Answers (1)

sapphyra
sapphyra

Reputation: 77

After further consideration, it seems that I am not entirely clear on the fundamentals of why the $ns variable exists: rather than trying to use it to reference whether the app is in dark or light mode, it makes more sense to use it thus (SCSS):

.app {
  .#{$ns}-dark {
    /* set the background color, any other required setup */
    ...
    & .my-button-group.#{$ns}-button-group {
      /* override anything you might want for the element.bp3-button-group
    }
  }
}

Essentially, the $ns variable is used to point to bp3 to allow for future-proofing of your SASS. Changing it to bp3-dark or any other value would defeat this purpose.

Upvotes: 1

Related Questions