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

Question

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

这是我的Less代码：

@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的trunk构建）支持更简单的语法

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

Answer 2

尝试使用以下代码获取预期输出

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