How to set the CSS class name dynamically in LessCSS?

问题

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?

回答1:

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;
}

回答2:

Try the below code to get the expected output

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

来源：https://stackoverflow.com/questions/10280567/how-to-set-the-css-class-name-dynamically-in-lesscss