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?

Luke Page · Accepted Answer · 2012-10-08 12:19:12Z

17

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

answered Apr 23, 2012 at 13:18

Luke Page

8,1861 gold badge24 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

you may have to put the whole selector inside the quotes, I can't remember.

Works great, make sure to update to LessApp 2.7 (it wasn't working in 2.6)

How to do this with &? &(~".@{scope}") { color: #fff; } doesn't work.

the simpler syntax allows normal css around it, e.g. &.@{scope} should work

bala_winwin · Accepted Answer · 2012-06-13 17:00:40Z

2

Try the below code to get the expected output

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

answered Jun 13, 2012 at 17:00

bala_winwin

747 bronze badges