Eugene Mikhushkin Eugene Mikhushkin - 6 months ago 54
Sass (Sass) Question

SASS map inheritance on different values of body attribute

I have several SASS color maps for the template:

$map-black: (
$primary-color: black,
$secondary-color: grey
)
$map-white: (
$primary-color: white,
$secondary-color: grey
)


Can I bind specific map on body attribute value or class?

<body data-color="white">
<h1>Title</h1>
</body>

body[data-color="white"] {
@use $map-white;
}
body[data-color="black"] {
@use $map-black;
}

Answer Source

Plain HTML5: not that I know of. But you can write yourself a mixin, which produces this kind of output as simple css-classnames with a for-loop over your maps.

you can test the following on sass-meister (https://www.sassmeister.com/)

$map-black: (
  primary-color:    '#fff',
  secondary-color:  '#ccc'
);

$map-white: (
  primary-color:    '#fff',
  secondary-color:  '#ccc'
);

$themes: (
  white: $map-white,
  black: $map-black
);

@each $theme, $colors in $themes {
  .#{$theme} {
    background: map-get($colors, primary-color);
    color: map-get($colors, secondary-color);
  }
  h1.#{$theme} {
    color: map-get($colors, secondary-color);
  }
  .#{$theme} > p {
    color: map-get($colors, secondary-color);
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download