css less adding a variable to the selector

Question

I'm a LESS newbie just trying to use it initally to remove some duplication form my stylessheets. I'm trying to add a variable to a (relatively) complex selector in less 1.2.21 using the following code:

@current_house_id: 97;
ul#house-family-menu li#menu-item-@current_house_id {
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
}

For the avoidance of doubt the original css would have been:

ul#house-family-menu li#menu-item-97 {
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
}

When I compile this with lessc I get error:

Syntax Error: on line 268: expected one of [ ( . # * - :: : @media @font-face , { ; got @ after: ul#house-family-menu li#menu-item-

I've tried various escaping mechanisms suggested here and elsewhere but nothing seems to work, perhaphs this isn't supported in less? If it isn't I guess I could do the less equivlent of a case on ul#house-family-menu li#menu-item and apply the items one at a time?

Any help much appreciated.

This doesn't make too much sense to me. When does @current_house_id ever change? Why not use a class? — deceze
– deceze ♦, Commented Nov 7, 2012 at 9:39
The same style sheet is used across multiple sites and several different selectors refer to the variable. In addition the id numbers are set by wordpress menu creation. — Jona
– Jona, Commented Nov 7, 2012 at 9:41
I'd still suggest you use a class on the element in question instead of dynamically altering the CSS. — deceze
– deceze ♦, Commented Nov 7, 2012 at 10:40

Patrick · Accepted Answer · 2013-12-16 11:56:39Z

3

The following:

@b: 3;

(~'.tester@{b}') {
    font-size: 20px;
}

Outputs:

.tester3 {
    font-size: 20px;
}

Your solution:

@current_house_id: 97;
(~'ul#house-family-menu li#menu-item-@{current_house_id}') {    }

Outputs:

ul#house-family-menu li#menu-item-97 {    }

Edit:

1.4.0-beta looks to have changed this (http://lesscss.org/):

(~".myclass_@{index}") { ...

selector interpolation is deprecated, do this instead

.myclass_@{index} { ....

Additionally:

You cannot do selector interpolation, as expected (v1.5.0 at least), if selector is a pseudo element. Open issue: https://github.com/less/less.js/issues/1294

Work around:

.myMixin(@whichPseudo) {
  @pseudo-selector: ~":@{whichPseudo}";
    &@{pseudo-selector} {
       background: red;
    }
}

#someEl1 {
    .myMixin(before);
}

#someEl2 {
   .myMixin(after);
}

edited Dec 16, 2013 at 11:56

answered Nov 7, 2012 at 10:00

Patrick

3,4981 gold badge39 silver badges64 bronze badges

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

Collectives™ on Stack Overflow

css less adding a variable to the selector

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related