有没有办法根据 parent 的 class 重新定义 LESS 变量？

Question

所以我有这个 html 标记

<div class="text-white">
    <div class="textClass"></div>
</div>

class textClass 有一个未定义的变量，它会将标题颜色变为黑色，但我想要的是如果 textClass 元素有一个 text-white parent 然后 textClass 标题颜色将变为白色。这可能吗？

这是我目前所拥有的，但它不起作用：

//I defined the color of the heading
@heading-color: black;

//My attempt to redefine the heading-color base on class
.text-white > .textClass {
    @heading-color: white;
}

如果这不可能，那么我怎样才能使用更少的资源实现这一目标？

感谢任何可以提供帮助的人。

Answer 1

在这种情况下，您可以在变量名中不包含 - 字符，例如：

@headingColor: black;

.text-white > .textClass {
    @headingColor: white;
    background-color: @headingColor;
}
.some-heading {
    background-color: @headingColor;
}

输出：

.text-white > .textClass {
    background-color: #ffffff;
}

.some-heading {
    background-color: #000000;
}

注意：覆盖后只能在作用域内使用。

有没有办法根据 parent 的 class 重新定义 LESS 变量？

Is there a way to redefine a LESS variable depending on the parent's class?

css

less