Less学习笔记

Posted 2020-07-10

感谢慕课网的LESS即学即用课程。http://www.imooc.com/video/4825。视频课程地址。

1.koala考拉less编译器，nodejs库编译，浏览器端编译。

2.less中可以使用//注释，

　　/**/会被编译到CSS中

　　//注释在编译时会被删除

3.变量

申明变量要用@开头

@test_width:300px;

.box{

　　width:@test_width;

}

4.混合Mixin

//直接将别的属性拷贝过来

.box2{

　　.border_02(2px);

　　.border_03();

　　.box;

}

//混合-带参数

.border_02(@border_width){

　　border:solid yellow @border_width;

}

//混合-默认参数

.border_03(@border_width:10px){

　　border:solid yellow @border_width;

}

.border_radius(@radius:5px){

　　-webkit-border-radius:@radius;

　　-moz-border-radius:@radius;

　　border-radius:@radius;

}//这样可以统一设置，比较方便

5.匹配模式