css - 如何在 LessCSS 中动态设置 CSS 类名？

Question

我需要向 CSS 类添加动态名称以创建更具体的后代选择器。

这是我的较少代码：

@scope:  name;  //line1
.@scope .ui-widget{  color: #fff} //line2

但是我在第 2 行遇到了解析器错误。

有没有办法在 LessCSS 中动态设置 CSS 类名？

Answer 1

在 1.3 版本中添加了对 less.js 和 dotless 的支持

您必须使用方括号和转义字符串.. 例如

(~".@{scope} .another") { 
  color: #fff;
}

编辑

此格式已弃用。less 1.3.1（目前只是 less.js 的主干构建）支持更简单的语法

.@{scope} .another-class {
    color: white;
}

Answer 2

尝试以下代码以获得预期的输出

@scope:  name;//line1
(~".@{scope} .ui-widget")  {  color: #ffbbff}  //line2