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

Try the below code to get the expected output

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