Less学习笔记

感谢慕课网的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.匹配模式(像if)

//匹配模式
.triangle(top,@width:5px;,@color:#ccc){
　　border-width: @width;
　　border-color: transparent transparent @color transparent;
　　border-style: dashed dashed solid dashed;
}

.triangle(bottom,@width:5px;,@color:#ccc){
　　border-width: @width;
　　border-color: @color transparent transparent transparent;
　　border-style: solid dashed dashed dashed;
}
//@_默认方法
.triangle(@_,@width:5px;,@color:#ccc){
　　width: 0;
　　height: 0;
　　overflow: hidden;
}
//调用
.sanjiao{
　　.triangle(top,100px);
　　.triangle(aaa,100px);//不认识的就只有默认方法的内容
}

 

6.运算
@test:300px;
.box{
width: (@test-10)*5;
//颜色也可以计算;
}

 

7.嵌套规则（重要）

//原有写法
.list{}
.list li{}
.list a{}
.list span{}

//使用嵌套的写法，会编译成原有写法！
.list{
　　width: 600px;
　　margin:30px auto;
　　list-style: none;

　　li{
　　　　height: 30px;
　　　　line-height: 30px;
　　　　margin-bottom: 5px;
　　}
　　a{
　　　　//不要过多的嵌套，来提高效率！;

　　　　&：hover{

　　　　　　color:red;

　　　　}
　　　　//相当于原来的
　　　　.list a{}
　　　　.list a:hover{}

　　　　//&符号代表对象的上一层选择器
　　　　}

  　　}
}

 

8.@arguments对象

.border_arg(@w:30px,@c:red,@xx:solid){

　　border:@arguments;

　　//会把所有入参全部带入

}

 

9.避免编译

//输出一些less不认识的CSS等

.test_03{

　　width:calc(300px-30px);

　　//clac是CSS3提供的让浏览器计算的。

　　width:~'calc(300px-30px)';//这样会原封不动的输出！

}

！important关键字

让样式的层级优先级是最高的

.test_import{

　　.border_03() !important;

　　//混合里所有属性都家了important，一般调试时候用

}

 

经常有这样的用法

&_img{

}

&就代表父控件的名字比如

body{

　　&_img{}

　　budy_img{}//同上

}

再讲下absolute的用法，他是基于relative父控件的absolute，也就是说绝对位置的0,0点是上层的relative控件的0,0点，若上层没有relative控件才是window。

text-indent:50px;缩进50px


用了浮动记得要在父控件中清除浮动

.clearfix{
　　&:after{
　　　　content:"";
　　　　display:block;
　　　　clear:both;
　　}
　　zoom:1;

 }

http://www.studyofnet.com/news/196.html  css用clearfix清除浮动

清除样式

.reset(){

　　*{margin:0;padding:0;}

　　ul,ol{list-style:none;}

　　a{text-decoration:none;}

　　img{border:none;}

}