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

【问题标题】：How to set the CSS class name dynamically in LessCSS?如何在 LessCSS 中动态设置 CSS 类名？
【发布时间】：2013-05-10 01:57:22
【问题描述】：

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

这是我的 Less 代码：

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

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

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

【问题讨论】：

标签： css less

【解决方案1】：

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

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

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

编辑

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：