CODEWITHSUNDEEP
csscss-selectorsless
lalour
lalour

Reputation: 23

How can I use a declaration from an existing rule set in LESS?

I have an existing rule set with a compound selector like this,

.class1 + .class2 { /* declaration block */ }

I want to use a particular declaration from this rule set prop1: value1

In my LESS is there a way to get the effect of (.class1+.class2).prop1 ?

I do not want to duplicate prop1 in the new class but use the declaration from .class1 + .class2

I have tried the following without success,

(.class1+.class2).prop1
.class1+.class2.prop1

Upvotes: 2

Views: 59

Answers (1)

BoltClock
BoltClock

Reputation: 724342

I don't think you can do this except by moving that declaration to its own mixin, then referencing said mixin in both .class1 + class2 and anywhere else you want to reference this declaration:

.prop1() {
    prop1: value1;
}

.class1 + .class2 {
    .prop1;
}

.class3 {
    .prop1;
}

On a side note: in standard selector syntax, "compound selector" refers specifically to a sequence of simple selectors — what you have is a complex selector consisting of two compound selectors, .class1 and .class2, separated by a + combinator. Just a minor nitpick, but will go a long way toward understanding the more sophisticated selectors that will be introduced in future standards. There is no notation in either standard CSS or LESS that will allow you to reference a style declaration based on a selector, as many rulesets can have the same selector and styles can cascade differently on a per-element basis.

Upvotes: 2

Related Questions