这里有一个存在问题的代码片段:
https://jsfiddle.net/c2exs2f7/3/
如何使第二个“blue”和第一个实例相同(应该为color: white
),而不改变HTML结构?
HTML
<div class="blue">
<div class="content">
<div class="label">blue</div>
<div class="yellow">
<div class="content">
<div class="label">yellow</div>
<div class="blue">
<div class="content">
<div class="label">blue</div>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS
// Skip until...
div {
border-radius: .25em;
padding: .5em;
font-family: helvetica, sans-serif;
}
// ...here:
.blue {
background-color: hsl(220,100%,50%);
.content {
color: white;
}
}
.yellow {
background-color: hsl(60,100%,50%);
.content {
color: hsl(0,0%,10%);
}
}
编辑 #1
谢谢大家的快速回复!
我正在开发一个网格系统,其中我能够嵌套不同的网格系统(具有不同的CSS值)。