У меня есть два набора переменных:
// 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>
Чтобы я мог сделать что-то вроде:
p {
color: @secondary
}
И получившийся текст <p>
будет окрашен в розовый цвет, если <p>
является дочерним (или косвенно вложенным) .foo
но красный, если это дочерний элемент (или косвенно вложенный) для .bar
.
Возможно ли это?