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-w         


        

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

Answer 2

Try the below code to get the expected output

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