Chax Chax - 2 months ago 13
Less Question

Less: class then node type

I have two

<p>
and one
<button>
that extend a certain
class
named
test
. I want to know if it is possible to add certain style rules to
.test
and then specific rules for the element type?

I thought of something like this:

.test {
font-weight: bold;
color: blue;

&p {
font-size: 26px;
}

&button {
font-size: 20px;
}
}


I know it is impossible to write it like that. This example is only for a concept example.

I've read the documentation and alas i found nothing...

Any idea or is this just impossible to achieve?

Answer

If I understand correctly you should use :extend:

LESS:

.test {
  font-weight: bold;
  color: blue;
}

p:extend(.test) {
  font-size: 26px;
}

button:extend(.test){
  font-size: 20px;
}

Output:

.test, p, button {
  font-weight: bold;
  color: blue;
}
p {
  font-size: 26px;
}
button {
  font-size: 20px;
}
Comments