Question

我为模板提供了几张SASS色彩映射：

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

我可以在body属性值或类上绑定特定的地图吗？

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

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

Answer 1

你的语法有点偏。您可以通过以下方式定义两个地图：

$red: (
   primary-color:    red,
   secondary-color:  orange
);
$blue: (
   primary-color:    blue,
   secondary-color:  green
);

然后，您可以使用map-get($map, key)：

访问地图中的值

div[data-color="red"] h1 {
  color: map-get($red, primary-color);
}
div[data-color="red"] .desc {
  color: map-get($red, secondary-color);
}
div[data-color="blue"] h1 {
  color: map-get($blue, primary-color);
}
div[data-color="blue"] .desc {
  color: map-get($blue, secondary-color);
}

这将适用于这样的HTML结构：

<div data-color="red">
  <h1>Title</h1>
  <p class="desc">Description</p>
</div>
<div data-color="blue">
  <h1>Title</h1>
  <p class="desc">Description</p>
</div>

您可以对其进行测试in this fiddle

Answer 2

纯HTML5：不是我所知道的。但是你可以自己编写一个mixin，它可以将这种输出产生为简单的css-classnames，并在你的地图上使用for循环。

您可以在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);
  }
}

SASS映射继承不同的body属性值

2 个答案: