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

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

html sass

Html 不同body属性值上的SASS映射继承,html,sass,Html,Sass,我有几个用于模板的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> &

我有几个用于模板的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;
}


标题
正文[数据颜色=“白色”]{
@使用$map白色；
}
正文[数据颜色=“黑色”]{
@使用$map black；
}

普通HTML5：据我所知不是这样。但是您可以自己编写一个mixin，它以简单的css类名的形式在地图上生成这种输出，并带有for循环

您可以在sass-meister（）上测试以下内容

普通HTML5：据我所知不是这样。但是您可以自己编写一个mixin，它以简单的css类名的形式在地图上生成这种输出，并带有for循环

您可以在sass-meister（）上测试以下内容

你的语法有点错误。可以通过这种方式定义两个贴图：

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

然后，您可以使用

map get（$map，key）

访问映射中的值：

这将应用于如下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>


标题
描述
标题
描述

您可以测试它

您的语法有点错误。可以通过这种方式定义两个贴图：

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

然后，您可以使用

map get（$map，key）

访问映射中的值：

这将应用于如下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>


标题
描述
标题
描述

您可以测试它

没有

attr

属性。我建议您使用定制的

数据-

属性。例如，

data color=“white”

。没有

attr

属性。我建议您使用定制的

数据-

属性。例如，

data color=“white”

。你能提供一个mixin的例子吗？你能提供一个mixin的例子吗？