Use a particular Sass map depending on variable

Question

I've run into an issue where it's easier for me to define two base maps that can be flicked between using a single variable (Seems easier for base, light/dark themes)

https://codepen.io/anon/pen/bLwNaW

I'm trying to set $theme-being-used, check it in a If/Else and use a particular map based on that result. This makes it simple for me to come in and set $theme-being-used to dark and change all of the base variables.

I've tried:

@if (#{$theme-being-used} == light) {

@if ($theme-being-used == light) {

@if (#{$theme-being-used} == "light") {, etc..

Does anyone know if this can be done? It's not a big deal either way, just saves a little bit of time when throwing up templated sites.

Before I was achieving this by simply comment/uncommenting code, i.e.

$palette: (
    // Light 
    ui: (
        primary:    #FFFFFF,
        secondary:  #EEEEEE,
        alternate:  #DDDDDD
    ),
    // Dark - COMMENTED when I want to use light variables
    /*ui: (
        primary:    #333,
        secondary:  #444,
        alternate:  #555
    ),*/
);

This is fine and pretty quick, but it'd just be easier to set it in one place and not have to do this.

Thanks.

score 2 · Accepted Answer · answered Feb 06 '18 at 13:22

2

Place $theme-being-used check to _palette function. This function take only one parameter — color name. And contains all color select logic inside itself.

Sassmeister demo.

$theme-being-used: light;

$palette: (
    dark: (
        primary:   red,
        secondary: orange,
        tertiary:  blue
    ),
    light: (
        primary:   green,
        secondary: black,
        tertiary:  yellow
    )
);

@function _palette($color-name, $theme-name: $theme-being-used) {
  // Select one of available themes
  // Here there may be more complex logic in choosing themes
  $theme: map-get($palette, #{$theme-name});

  // Get the color from theme
  @return map-get($theme, #{$color-name});
}

.s-o {
  background: _palette(primary);

  &:hover {
    background: _palette(secondary);
  }
}

answered Feb 06 '18 at 13:22

3rdthemagical

5,271
18
36

Hey @3rdthemagical, thanks a lot for the reply! My setup looks fairly similar. I've set this up more like mine already is, I'm trying to just change one variable in one location and have the rest compile with a specific map, based on that value. https://www.sassmeister.com/gist/2bff100a405cff68f22a7d1aba73a080 As you can see, I'm trying to just change $theme-being-used to light/something else and have the IF/ELSE decide which Map should be used.If it can be done that's great, if not, thanks for your help! – Sean Keenan Feb 06 '18 at 14:41
You got error `Undefined variable: "$palette".` To avoid this you can use `!global` flag or define `$palette` var globally. – 3rdthemagical Feb 06 '18 at 14:53
Legend, that does it. Must be something to do with the map being inside a control directive? Either way thanks a lot! – Sean Keenan Feb 06 '18 at 14:59
I had already gone with !global but appreciate you showing me the null option, I wasn't aware I could do that as well. Thanks again. – Sean Keenan Feb 06 '18 at 15:03

Use a particular Sass map depending on variable

1 Answers1