less的mixin使用实践

今日开发，画一个简单的页面，中间包含一个固定的菜单列表，列表的每一个选项会有不同的图片资源显示。类似这样的，hover会有hover的图片：

image.png

考虑到图片引入地方较多，如果用css去写会比较多重复代码，于是大概看了一下less文档，具体可以运用到list， each 和mixin的功能。

1. 我们先使用list声明几个资源：

@resources: home, explorer, resource, forums;

2. 声明img-set的mixin：

.backgroundImage(@img, @img2x) {
  background-image: -webkit-image-set(url(@img) 1x, url(@img2x) 2x);
  background-image: image-set(url(@img) 1x, url(@img2x) 2x);
}

3. 使用each去开始去声明不同的class

each(@resources, {
          .@{value} {
            .backgroundImage('./img/@{value}-blue.png', './img/@{value}-blue@2x.png');
          }
 });

这样有多少个资源都不要重复写了。