CODEWITHSUNDEEP
sassmixins
user2822813
user2822813

Reputation: 11

Sass change the value of variable based on body class?

I am trying to create a sass mixin which allows to redefine the value of a variable according to a class added on . I am stuck at this stage (which does not work) and I wonder if it is finally possible to do so:

$color-1: #9E619B;
$color-2: #BB496A;
$themecolor: red !default;
$color-themes: (
   theme1-pages:
       (
           themecolor: $color-1
       )
   theme2-pages:
       (
           themecolor: $color-2
       )
);

@each $name, $theme in $color-themes {
   body.#{$name} {
       $themecolor: map-get ($name, themecolor);
   }
}

Upvotes: 0

Views: 138

Answers (1)

Terry
Terry

Reputation: 66113

I think you've got a syntax error (extra space after map-get) and a mistake in the arguments for map-get(): the arguments should be $theme and themecolor respectively, not $name and themecolor:

@each $name, $theme in $color-themes {
   body.#{$name} {
       $themecolor: map-get($theme, themecolor);
   }
}

That is because $name is simply the key, while $theme is the reference to the value. If you paste the fixed version of your code into SassMeister:

$color-1: #9E619B;
$color-2: #BB496A;
$themecolor: red !default;
$color-themes: (
   theme1-pages:
       (
           themecolor: $color-1
       ),
   theme2-pages:
       (
           themecolor: $color-2
       )
);

@each $name, $theme in $color-themes {
   body.#{$name} {
      $themecolor: map-get($theme, themecolor);
      color: $themecolor;
   }
}

You should expect to get this back without any error:

body.theme1-pages {
  color: #9E619B;
}

body.theme2-pages {
  color: #BB496A;
}

Upvotes: 1

Related Questions