CODEWITHSUNDEEP
csssass
superPip
superPip

Reputation: 51

Scoped SCSS variables for themeing

I have a set of palettes for different themes like so:

$primary: red; 
$secondary: blue;

.theme-2 { $primary: green; $secondary: yellow; }

//..
//some random scss file that has typography class names
.cool-text { color: $primary; }

Is it possible to make it so, whatever the class name applied to the container uses the variable palette colors defined for it?

Ex:

<div class="theme-2">
   <p class="cool-text"> cool </p> // should be green
</div>


<p class="cool-text"> cool </p> //should be red

Upvotes: 0

Views: 398

Answers (2)

Geeky
Geeky

Reputation: 7488

You can use !default here check this running code snippet,with your html codepen

$primary: red !default; 
$secondary:blue !default;

.cool-text { color: $primary; }

.theme-2 { 
    $primary: green; 
    $secondary: yellow; 

    .cool-text{
      color: $primary;
    }
}

With this if color is not set to anything ,it would take default red color if not whatever you set it would take that

Hope it helps

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18639

Because Sass variables are compiled before runtime, they cannot be context-sensitive, so the example you provided would not be possible.

Some helpful reading with alternate examples here: https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498

And I'd read into native CSS variables, which can do exactly what you want and are gaining support in most browsers aside from IE/Edge: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Upvotes: 1

Related Questions