CODEWITHSUNDEEP
cssless
Shawn Erquhart
Shawn Erquhart

Reputation: 1858

Is it possible to reference a parent selector in a LESS variable?

I'm trying to use the ampersand to bring parent selectors into a variable containing pseudo-class selectors:

.my-selector,
.my-other-selector {
  @{pseudo-states} {
    // rules
  }
}

The following attempts all produced the literal variable content in the generated css:

@pseudo-states: &:hover, &:focus, &:active, &.active;
@pseudo-states: ~"&:hover, &:focus, &:active, &.active";
@pseudo-states: ~"\&:hover, \&:focus, \&:active, \&.active;

Any way to achieve this?

It seems that LESS simply doesn't process the contents of variables, so this question may come down to whether or not there's a way to change that.

Upvotes: 2

Views: 537

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

Adopting one of examples linked in comments above, here's the most (so far) clean solution:

// usage:

.my-selector,
.my-other-selector {
    .pseudo-states({
        /* rules */
    });
}

// impl.:

.pseudo-states(@-) {
    &:hover, &:focus, &:active, &.active {@-();}
}

Upvotes: 4

Related Questions