html - 是否可以根据范围调整较少的变量？

Question

我有两组变量：

// first
@main: blue;
@secondary: pink;

// second
@main: orange;
@secondary: red;

我有以下html：

<div>
  <div class="foo">
    <h1>FOO</h1>
    <div>
      <p>some text</p>
      <a href="#">even a link</a>
    </div>
  </div>
  <div class="bar">
    <h1>bar</h1>
    <div>
      <p>some text</p>
      <a href="#">even a link</a>
    </div>
  </div>
</div>

• 我只想将第一组 vars 分配给它的.foo所有子代。

• 我只想将第二组变量分配给.bar它的所有子项。

这样我就可以做类似的事情：

p {
  color: @secondary
}

如果是 的子级（或间接嵌套），则生成的<p>文本将显示为粉红色，但如果是 的子级（或间接嵌套），则显示为红色。<p>.foo.bar

那可能吗？

标签： htmlcsssassless