How to make LESS combine CSS rules with a comma

Question

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?

possible duplicate of [Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?](http://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on) — Valentin Mercier, Jul 07 '14 at 09:42
You don't. You just create the rule yourself like you have in your final snippet. — Prisoner, Jul 07 '14 at 09:44
Stylus can combine css [selector](http://stylus-lang.com/docs/selectors.html) with comma — StefansArya, Oct 11 '18 at 01:41

score 6 · Accepted Answer · answered Jul 07 '14 at 09:48

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;
}

seven-phases-max · Answer 2 · 2014-07-07T20:26:02.260

0

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) {}
}

edited Jul 07 '14 at 20:26

answered Jul 07 '14 at 20:09

seven-phases-max

11,765
1
45
57

How to make LESS combine CSS rules with a comma

2 Answers2