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-08T12:19:12.693

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

edited Oct 08 '12 at 12:19

answered Apr 23 '12 at 13:18

Luke Page

you may have to put the whole selector inside the quotes, I can't remember. – Luke Page Apr 23 '12 at 13:19
Works great, make sure to update to LessApp 2.7 (it wasn't working in 2.6) – Jon Raasch May 09 '12 at 20:18
2

How to do this with `&`? `&(~".@{scope}") { color: #fff; }` doesn't work. – Gerard Roche Oct 05 '12 at 16:37
the simpler syntax allows normal css around it, e.g. &.@{scope} should work – Luke Page Jun 25 '13 at 07:57

score 2 · Answer 2 · answered Jun 13 '12 at 17:00

2

Try the below code to get the expected output

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

answered Jun 13 '12 at 17:00

bala_winwin

2 Answers2