Simplify LESS :hover and :focus

Question

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.

Answer 1

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.

also see: https://stackoverflow.com/questions/23658087/loop-over-an-array-of-name-value-pairs-in-less/26445367#26445367

@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();
}