CODEWITHSUNDEEP
cssless
noclist
noclist

Reputation: 1819

LESS - styling classes differently dependent on the parent element

I have some LESS styles similar to the following. Is there a technique in LESS that better handles what I am trying to achieve without having to duplicate the class name under each parent element? 

span {

    .zero {
        color: #fff;
    }
}

div {

    .zero {
        color: #389c40;
    }
}

Upvotes: 1

Views: 344

Answers (2)

user663031
user663031

Reputation:

Well, you could always do

.zero {
  span & { color: #fff; }
  div & { color: #389c40; }
}

Upvotes: 2

Muran
Muran

Reputation: 82

Try using css variables:

:root{
    --zColor: #fff;
}
.zero{
    color: var(--zColor);
}
div{
    --zColor: #389c40;
}

Upvotes: 2

Related Questions