How to set CSS class name dynamically in LessCSS?

Question

I need to add a dynamic name to the CSS class in order to create a more specific selector handle.

Here is my Smaller code:

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

But I get a parser error on line2.

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

Answer 1

Support was added in less.js and without loss in version 1.3

You need to use brackets and an escaped string. For example,

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

Edit

This format is outdated. less than 1.3.1 (currently only the lower.js line assembly) supports simpler syntax

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

Answer 2

Try the code below to get the expected result

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