# Simplify LESS :hover and :focus

I have the following snippet of LESS code to generate CSS. I have some different classes which I apply to different elements, and on hover or focus they should change color.

.social-icons {
color:#bbbbbb;
// Material design palette, 500

.blue {
&:hover, &:focus {
color: #2196F3;
}
}
.red {
&:hover, &:focus {
color: #F44336;
}
}
.green {
&:hover, &:focus {
color: #4CAF50;
}
}
.teal {
&:hover, &:focus {
color: #009688;
}
}
.purple {
&:hover, &:focus {
color: #9C27B0;
}
}
.lime {
&:hover, &:focus {
color: #CDDC39;
}
}
.orange {
&:hover, &:focus {
color: #FF9800;
}
}

}


It produces the following CSS, which is good:

.social-icons {
color: #bbbbbb;
}
.social-icons .blue:hover,
.social-icons .blue:focus {
color: #2196F3;
}
.social-icons .red:hover,
.social-icons .red:focus {
color: #F44336;
}
.social-icons .green:hover,
.social-icons .green:focus {
color: #4CAF50;
}
.social-icons .teal:hover,
.social-icons .teal:focus {
color: #009688;
}
.social-icons .purple:hover,
.social-icons .purple:focus {
color: #9C27B0;
}
.social-icons .lime:hover,
.social-icons .lime:focus {
color: #CDDC39;
}
.social-icons .orange:hover,
.social-icons .orange:focus {
color: #FF9800;
}


I'm new to LESS, so I was wondering; Is there a way to make it even a shorter block of code in LESS? I feel like that &:hover, &:focus {} is used more than it needs to be. I tried nesting all .color classes in :hover,:focus and using & to refer to them, but it didn't work as I expected.

• Did you look through the LESS documentation? There is at least 1 language construct that's specifically for reusing blocks of code. When the documentation is a single page long like it is for LESS or Sass, I'm a lot less forgiving about not being able to find features that are clearly documented. Apr 20, 2015 at 19:18
• Sorry about disappointing you, but do you mean the &-variable? I have not found a way yet to use this properly, as it doesn't produce the right results for me. Apr 21, 2015 at 14:45
• Ah, perhaps you meant using functions. I did not know I could use functions within the definition of a selector. Maybe that isn't even required. I will look into using them. Thanks for sending me in the right direction, although I find the documentation not really fully documented. But that's my opinion, as I'm new to this, I should be better off with following a tutorial. Apr 21, 2015 at 14:51

You can use a mixin. In less you can mixin properties from class and ID selectors. A class selector with parentheses after it (.mixin()) will be called a mixin. Mixins themselves do not generate output in the compiled CSS. Mixins can be parameterized.

For you example:

.states(@color) {
&:hover, &:focus {
color: @color;
}
}


Now you can use:

.social-icons { color:#bbbbbb; // Material design palette, 500

.blue { .states(#2196F3); } }

The above compiles into CSS as follows:

.social-icons {
color: #bbbbbb;
}
.social-icons .blue:hover,
.social-icons .blue:focus {
color: #2196f3;
}


Alternatively you could create less code which defines a list of key value pairs and use a mixin guard to create a loop which sets your classes and states.

@colors: blue #2196F3, red #F44336, green #4CAF50, teal #009688, purple  #9C27B0,  lime #CDDC39, orange #FF9800;

.states(@iterator:1) when(@iterator <= length(@colors)) {
@class: extract(extract(@colors, @iterator),1);
.@{class} {
&:hover, &:focus {
color: extract(extract(@colors, @iterator),2);
}
}
.states((@iterator + 1));
}

.social-icons {
color:#bbbbbb;
// Material design palette, 500
.states();
}