Less 使用 经验总结
2014-07-07 13:18
375 查看
案例一:
@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),格式为所有内容在同一行,我在这里手动进行了换行)
案例一的重点:
1. 循环是如何表达的
2. 字符串的一部分是变量时,如何组装字符串。
@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. 字符串的一部分是变量时,如何组装字符串。
相关文章推荐
- 网友们总结使用blog的各种技巧和经验
- 有关水晶报表的使用经验和资料总结
- JTree用法及JTree使用经验总结(吐血推荐)
- VC中使用ListCtrl经验总结
- [转]水晶报表的使用经验和资料总结 [http://blog.csdn.net/coolsummer1980/archive/2006/09/30/1310588.aspx]
- Ajax使用经验总结(大纲)
- Linux下使用oracle的经验总结
- JTree使用经验总结 - [ ] - [ ]
- VC中使用ListCtrl经验总结
- jfreechart使用经验总结(针对版本:jfreechart-1.0.0-pre2.zip)
- 提高书写效率--editplus使用经验总结
- 使用JfreeChart开发图表经验总结
- VC中使用ListCtrl经验总结(1)
- JTree使用经验总结
- VNC 使用经验总结
- VC中使用ListCtrl经验总结(1)
- JfreeChart使用经验总结(分析了使用中碰到的一些常见问题)
- 水晶报表的使用经验和资料总结
- SQL Server2000 索引结构及其使用 (索引使用经验总结)
- SQL优化-索引 (四)其他书上没有的索引使用经验总结