如何在LessCSS中动态设置CSS类名？ [英] How to set the CSS class name dynamically in LessCSS?

问题描述

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

这是我的Less代码：

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

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

您必须使用括号和一个例如

 （〜。@ {scope} .another）{
 color：#fff ; 
} 
  

编辑

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

 。@ {scope} class {
 color：white; 
} 
  

I need to add a dynamic name to a CSS class to create a more specific decendent selector.

Here is my Less code:

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

But I am getting a parser error at line2.

Is there any way to set the CSS class name dynamically in LessCSS?

解决方案

Support was added to less.js and dotless in version 1.3

You have to use brackets and an escaping string.. e.g.

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

Edit

This format is deprecated. less 1.3.1 (currently just trunk build of less.js) supports a simpler syntax

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

这篇关于如何在LessCSS中动态设置CSS类名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！