我在HTML和SASS中使用属性模块，因为这很合逻辑。目前，我可能会有这样的标记：
<article data-post="wrap feature">
<h1 data-post="title feature">Feature title</h1>
</article>
<article data-post="wrap">
<h1 data-post="title">Normal title</h1>
</article>
SASS看起来像这样：
[data-post] {
font-size: 15px;
color: black; }
[data-post~="title"] {
font-size: 20px; }
[data-post~="title"][data-post~="feature"] {
font-size: 30px; }
工作正常，但我想知道是否可以在SASS中嵌套这些。它们都适用于，[data-post]因此我想在其中定位属性。我在想像这样的东西（显然不起作用）：
[data-post] {
font-size: 15px;
color: black;
&[~="title"] {
font-size: 20px; }
&[~="title"]&[~="feature"] {
font-size: 30px; }
}
这将更合乎逻辑，更干燥，并且更易于编码/维护。
这很近。您每次都必须在子选择器中重新声明属性名称。类和ID可以通过添加父类的结尾来避免，但是如果将相同的想法扩展到属性，则第二个选择器将是[data-post][~="title"]。
所以：
[data-post] {
font-size: 10px;
&[data-post~="title"] {
font-size: 50px;
color: blue;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句