CODEWITHSUNDEEP
cssless
Régis B.
Régis B.

Reputation: 10588

LESS: mixin with non-class ruleset

In LESS, I am trying to define the button.c2 ruleset, to be applied to <button class="c2">...</button> elements. This ruleset is mainly based on the button.c1 ruleset. However, the following code produces a ParseError:

button.c2 {
  button.c1;// Trying to import a ruleset
  ... // additional rules, such as font-size: 120%;
}

It seems to me that the ParseError is caused by the fact that the imported ruleset does not refer to a class or ID ("button.c1" does not start with a "." or a "#"). From the LESS documentation:

Any CSS class or id ruleset can be mixed-in that way.

Why is there such a limitation? Is there any way around it?

Upvotes: 2

Views: 278

Answers (1)

freejosh
freejosh

Reputation: 11383

The limitation might just be ease of parsing, since . or # don't show up as the first character of a normal style rule the parser automatically knows that those should be mixed in.

You could get around it by defining .c1 as a mixin and using it for both buttons:

.c1() {
    // c1 rules
}

button.c1 {
    .c1;
}

button.c2 {
    .c1;
    // additional rules
}

However, coming up in LESS 1.4.0 are :extend selectors, which will allow you to do what you want. The syntax would be:

button.c2:extend(button.c1) {
    // additional rules
}

Upvotes: 4

Related Questions