CODEWITHSUNDEEP
cssless
Terry
Terry

Reputation: 127

How to make LESS combine CSS rules with a comma

For example:

.icon-pinterest{
    color:#CC2027;
    background: #fff;
    &:hover{
        color:#CC2027;
        background: #fff;
    }
}

This will generate:

.icon-pinterest {
  color: #cc2027;
  background: #fff;
}

.icon-pinterest:hover {
  color: #cc2027;
  background: #fff;
}

But I want it as the following:

.icon-pinterest,
.icon-pinterest:hover {
  color: #cc2027;
  background: #fff;
}

I think maybe I can use the extend expression?

Upvotes: 0

Views: 2357

Answers (2)

seven-phases-max
seven-phases-max

Reputation: 11820

Just in case, it is of course possible with extend, but that would not make any sense since it's already perfect enough in its native CSS format (see @David Mulder answer). Just always remember that Less is still the CSS and never use Less nesting for the sake of nesting.

Using extend:

.icon-pinterest {
    color: #CC2027;
    background: #fff;
    &:hover:extend(.icon-pinterest) {}
}

Upvotes: 0

David Mulder
David Mulder

Reputation: 27020

This is not possible, as it does not seem all that sensible in the first place (applying a hover for example to an element where the default style is already the same) and is still possible with the default CSS syntax for those rare cases where you need it. So you would simply use

.icon-pinterest,
.icon-pinterest:hover {
  color: #cc2027;
  background: #fff;
}

Upvotes: 6

Related Questions