最近项目接触了less,这里就记录一下写less遇到的小问题,当做备忘,也希望能对看见此文的大家有些许帮助。~~
首先我在写样式的时候觉得一个个的写背景图有些麻烦,想既然是less那就一定会有更加便捷的方法,一搜果不其然就是有方法。
不废话,上代码
加一个前提,就是你的图片命名必须是xxx1,xxx2这样的连续数字命名,不然无法使用变量。
示例代码
//less中的背景图片循环
.nav_r(@navicon) when (@navicon < 4 ) {
.nav_son@{navicon} {
background:url("../img/home@{navicon}.png") no-repeat 0 0;
}
.nav_r(( @navicon + 1 ));// 递归调用自身
}
.nav_r(1);
结构代码
//less中的背景图片循环
.你的父类名(@变量) when (@变量 < 你想要循环出来的图片数 ) {
.子类名@{变量} {
background:url("../img/图片前缀名字@变量.png") no-repeat 0 0;
}
.你的父类名(( @变量 + 1 ));// 递归调用自身
}
.你的父类名(赋值变量);