今日开发，画一个简单的页面，中间包含一个固定的菜单列表，列表的每一个选项会有不同的图片资源显示。类似这样的，hover会有hover的图片：
image.png
考虑到图片引入地方较多，如果用css去写会比较多重复代码，于是大概看了一下less文档，具体可以运用到list， each 和mixin的功能。
- 我们先使用list声明几个资源：
@resources: home, explorer, resource, forums;
- 声明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);
}
- 使用each去开始去声明不同的class
each(@resources, {
.@{value} {
.backgroundImage('./img/@{value}-blue.png', './img/@{value}-blue@2x.png');
}
});
这样有多少个资源都不要重复写了。
