less - How to set the CSS class name dynamically in LessCSS?

Question

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?

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