less学习笔记

1.注释块

//注释不会被编译保留

/*注释会被编译保留*/

2.变量

//定义变量，less中定义变量的方法为 @变量名：值；结果将被解析为css数值

3.混合

.test_mix {
　　.border_03();
}

//混合-默认带值
.border_03 (@border_width:10px) {
　　border: @border_width solid #ccc;
}

被编译的结果为：

.test_mix {
　　border: 10px solid #cccccc;
}

 

混合使用比较好的例子：

//圆角设置
.radius_set (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

.box3 {
.radius_set();
}

被编译为：

.box3 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

这是混合使用比较方便的地方，不用每次都写兼容性样式，值也是随着需求可变的。

4.匹配模式

//三角形
.triangle (top, @w:20px, @c:#ccc) {
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dotted dotted solid dotted;
}
.triangle (bottom, @w:20px, @c:#ccc) {
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dotted dotted dotted;
}
.triangle (left, @w:20px, @c:#ccc) {
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dotted solid dotted dotted;
}
.triangle (right, @w:20px, @c:#ccc) {
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dotted dotted dotted solid;
}

.triangle (@_, @w: 30px, @c: #ccc) {
width: 0;
height: 0;
overflow: hidden;
}

.sanjiao {
.triangle(top);
}

 

最后编译的结果为：

.sanjiao {
border-width: 20px;
border-color: transparent transparent #cccccc transparent;
border-style: dotted dotted solid dotted;
width: 0;
height: 0;
overflow: hidden;
}

其中.triangle (@_, @w: 30px, @c: #ccc) {
width: 0;
height: 0;
overflow: hidden;
}

这一段表示，无论四个方向中的哪个方向，都必须执行这段代码，注意，所有的参数都要写出来。

正如C++语言中的重载，根据参数不同选择对应的执行样式。

5.计算

less中可以计算宽度高度等值，也可以计算颜色值

6.嵌套规则

ul {
margin: 0;
　　top: 0;
　　list-style: none;
　　li {
　　　　float: left;
　　　　list-style-type: none;
　　}
　　a {
　　　　text-decoration: none;

　　　　//&代表上一层选择器
　　　　&:hover {
　　　　　　color: red;
　　　　}

　　}
}

编译代码：

ul {
margin: 0;
top: 0;
list-style: none;
}
ul li {
float: left;
list-style-type: none;
}
ul a {
text-decoration: none;
}

ul a:hover {
color: red;
}

注意：不要嵌套的太深

6.@arguments用法

.border_arg (@w:30px, @c: red, @xx: solid) {
border: @arguments;
}

.border_04 {
.border_arg(40px);
}

编译结果

.border_04 {
border: 40px #ff0000 solid;
}

可以偷一点懒用的不多

 

总的来说，less减少了一定的代码量（当然，是针对程序员来说写的代码量变少了，但是编译出来的代码量并没有减少）。学习less是因为想要学习bootstrap框架而看到的一个对于我来说还比较陌生的东西，怀着好奇的态度进行了一些比较浅的，基本语法的学习，想要用好自然还得通过大量的练习。网上对于less褒贬不一，好的说它为css赋予了语言的特性，使其有变量，有模块化的东西，使用起来还是比较顺手的，比如css3的一些新特性需要兼容浏览器，那么less就减少了编码量；不好的评价是觉得它没有必要，一个对css熟悉的程序员完全可以写出可维护性高的代码，再者，它需要先编译成css文件使用，增加了开支，得不偿失，在小的项目中可以上手玩一玩，对于大项目就要谨慎使用了。经验不足让我对less目前还不能做出正确的评价，但对于它mixin用法我觉得还是挺有用的，继承减少了一定的代码量。希望在以后有了一定经验后，能做出正确的判断。