Simplify the group of classes and pseudo classes in Less

Question

How could I simplify this expression?

.rss,
.rss:hover {
    background-color: #ff8900;
}

If there is any way of using like this?

.rss, &:hover {
    background-color: #ff8900;
}

Why even set a hover if the background color is going to be the same? — jleggio, Oct 13 '14 at 13:26
Any reason why you want to simplify it? It already looks pretty compact. Is there something more to what you are trying than given in question? — Harry, Oct 13 '14 at 13:26
I'm trying to avoid duplicating code, so, this is small part of it — kotapaulta, Oct 13 '14 at 13:35
`&_twitter, &_twitter:hover { background-color: #55acee; background-image: url('Twitter.svg'); .noSVG('Sprite.png', -1942px, -141px); } &_facebook, &_facebook:hover { background-color: #3b5998; background-image: url('Facebook.svg'); .noSVG('Sprite.png', -1940px, -45px); } &_youtube, &_youtube:hover { background-color: #cc181e; background-image: url('YouTube.svg'); .noSVG('Sprite.png', -1939px, -239px); }` — kotapaulta, Oct 13 '14 at 13:36
Ok, in that case one more question before I suggest any sample. If the main class and its hover always have the same set of props, you could use the way Hashem has mentioned. Another method might be to use `extend`. — Harry, Oct 13 '14 at 13:37
Yes, Hashem seems to be right. But it doesn't realy simplify. Anyway thx =) — kotapaulta, Oct 13 '14 at 13:40
As I said, your original code is already as close to compact as possible mate. So I am not sure if you could simplify it any further. The only alternate to Hashem's answer is using `extend` and it doesn't really simplify much either. — Harry, Oct 13 '14 at 13:41

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

Not sure if it does simplify, but one option could be using parent selector & as follows:

.rss {
   &, &:hover {
    background-color: #ff8900;
  }
}

In this approach you could specify which declarations should be shared between .rss and .rss:hover.

Another option could be extending the .rss as @Harry pointed that out:

.rss {
  background-color: #ff8900;
  &:hover:extend(.rss) {};
}

This method is helpful if both .rss and .rss:hover should have the same set of CSS declarations.

As can be seen, in this particular instance both of the above methods don't really simplify the selectors but they might help in more complex situations.

edited May 23 '17 at 12:20

Community

1
1

answered Oct 13 '14 at 13:25

Hashem Qolami

97,268
26
150
164

1

Don't want to add another answer when it is not much of an improvement on the current answer mate. So leaving my [sample](http://codepen.io/hari_shanx/pen/lbtEK) using the `extend` function as a comment here. Please feel free to add it to the answer if you are Ok with it :) – Harry Oct 13 '14 at 13:46

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Actually is something like this:

.rss {
   &:hover {background-color: #ff8900;
}

It adds the :hover to the rss, creating both

.rss

.rss:hover

classes to your css file

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 13 '14 at 13:29

Nick

13,493
8
51
98

Simplify the group of classes and pseudo classes in Less

2 Answers2