相对于原生css来说 less扩展了很多css不具备的功能 但又能很好的和css保持兼容,实在找不出不用它的理由; 😄相对scss来说个人觉得less更容易,本着够用就好的原则,可以说以下将提到的特性中的任意几样就足以让我坚持使用至今
循环输出CSS
.WHILE(@counter)when (@counter <= 54 ) {
.poker-@{counter} {
background-image: url("images/poker/poker_@{counter}.png");
}
.WHILE(( @counter + 1 ));// 递归调用自身
}
.WHILE(1);
相当于:
.poker-1 {
background-image: url("images/poker/poker_1.png");
}
.poker-2 {
background-image: url("images/poker/poker_2.png");
}
...
...
...
.poker-54 {
background-image: url("images/poker/poker_54.png");
}
样式嵌套模拟css命名空间
.page-food {
.hd {
// ...
}
.bd {
// ...
}
}
相当于:
.page-food .hd {
// ...
}
.page-food .bd {
// ...
}
## 定义css变量(模板皮肤利器)
``` less
// Variables
@c-6:#666;
@border-color:#ededed;
@link-color:#0086b3; // 默认链接颜色
@link-hover-color:#990073;
.link {
color:@link-color;
}
父级选择器&
// 以链接为例子 &等同于父级a
a {
&:link,&:visited: {
color:blue;
}
&:hover,&:active {
color:yellow;
}
}
// 甚至可以跳出父级
.header {
.nav {
// ...
}
.index & {
// ...
}
}
相当于:
.header .nav {
/* ... */
}
index .header .nav {
/* ... */
}
样式文件分割Importing(方便模块化管理样式文件)
@import "base"; // base.less
@import "typo";
@import "header";
@import "footer";
同时支持单行和多行注释(类似js)
// 单行注释
// body {}