Less 使用 经验总结

案例一：

@cons:-80px;

.myLoop(@counter,@i:0) when (@i <@counter) 
{
	@c:@i+1;
	.PtzControl-@{c}-out
	{
		background-position: 0 @cons * (@i*2);
	}
	.PtzControl-@{c}-over
	{
		background-position: 0 @cons * (@i*2+1);
	}
    .myLoop(@counter,@i + 1);    // next iteration
}

.myLoop(9);

生成的css文件如下（用sublime的less2css插件自动生成的（sublime安装插件的方法见http://blog.csdn.net/c_cyoxi/article/details/36947569），格式为所有内容在同一行，我在这里手动进行了换行）

.PtzControl-1-out{background-position:0 0}
.PtzControl-1-over{background-position:0 -80px}
.PtzControl-2-out{background-position:0 -160px}
.PtzControl-2-over{background-position:0 -240px}
.PtzControl-3-out{background-position:0 -320px}
.PtzControl-3-over{background-position:0 -400px}
.PtzControl-4-out{background-position:0 -480px}
.PtzControl-4-over{background-position:0 -560px}
.PtzControl-5-out{background-position:0 -640px}
.PtzControl-5-over{background-position:0 -720px}
.PtzControl-6-out{background-position:0 -800px}
.PtzControl-6-over{background-position:0 -880px}
.PtzControl-7-out{background-position:0 -960px}
.PtzControl-7-over{background-position:0 -1040px}
.PtzControl-8-out{background-position:0 -1120px}
.PtzControl-8-over{background-position:0 -1200px}
.PtzControl-9-out{background-position:0 -1280px}
.PtzControl-9-over{background-position:0 -1360px}

案例一的重点：

1. 循环是如何表达的 

2. 字符串的一部分是变量时，如何组装字符串。