less引入文件 less文件是什么

什么是less？
css的预处理语言，可以有变量，函数等特性。比纯css的方式更方便快捷。

怎么用？

需要编译软件，可以用考拉。创建less后缀文件，拖进考拉。后面补图。步骤：

1.创建一个less后缀文件，声明文档头@charset”utf-8”;

2.less文件（或文件夹）拖入考拉中

3.右键设置输出路径，跟less文件可以同一个文件下，同名最好。

4.点击编译。会创建出一个同名的css文件。

5.html文档中引入是引css文件，不是less文件。

6.写样式或维护样式，都在less文件里面写。

less：注释
less文件中对语句注释，直接单斜杠/
或者css的注释方式/* */也行

less：变量
less里面的变量一律用@符号开头比如：

@test_width:300px; //声明这个变量

.box{
 width:@test_width; //调用这个变量
 background-color:blue;
}

less：混合
能够重用的东西，可以混合给别的用。

.border{
 border:solid pink 5px;
}

.box1{
 width:300px;
 height:300px;

 .border; //上面的border直接拿来用，混合class
}

.box2{
 .box1; //拥有box1的样式（包括.border）
 margin-left:100px; //box2自己的样式
}

//带参数的混合
.border_02(@border_width){ //定义该样式带变量
 border:solid yellow @border_width
}

.test_box{
 .border_02(30px); //调用border_02样式并传参
}

.border_03(@border_width:10px){//定义样式带变量且有默认的值10px
 border:solid yellow @border_width
}

.test_box2{
 .border_03()//不传值，默认是10px,看css文件。
}

注意：
1.调用的时候，不带默认参数的变量，调用的时候不带。带默认参数的变量，调用的
时候不带的是默认值，带的是传入的值。

2.不同样式里面同名变量，不冲突。

省事的例子，圆角边属性radius

//要写3个样式，适应不同浏览器
.border_radius(@radius:5px){
 -webkit-border-radius:@radius;
 -moz-border-radius:@radius;
 border-radius:@radius;
}

//直接调用传参就行，不用重复写这3行
.radius_test{
 width:100px;
 .border_radius(10px) //调用并传参，不用重复写适应浏览器。
}

less：匹配
匹配，相当于JS里面的if（某条件），则执行哪个。
例子：CSS画三角形

.sanjiao{
 width:0px;
 height:0px;
 overflow:hidden //?干嘛的

 border-width:10px;
 border-color:transparent transparent transparent red;
 border-style:dashed dashed dashed solid; //dashed解决IE6下其他边不能透明，是黑色的问题。
}

.triangle(top,@w:5px,@c:grey){ //top，朝上的三角。匹配到top的时候，则用朝上的三角的样式，就是下面的代码，可以在对应的CSS文件里面看到。
 border-width:@w;
 border-color:transparent transparent @c transparent;
 border-style:dashed dashed solid dashed;
}

.triangle(bottom,@w:5px,@c:grey){ //bottom
 border-width:@w;
 border-color:@c transparent transparent transparent;
 border-style:solid dashed dashed dashed;
}

.triangle(right,@w:5px,@c:grey){ //right
 border-width:@w;
 border-color:transparent transparent transparent @c;
 border-style:dashed dashed dashed solid;
}

.triangle(left,@w:5px,@c:grey){ //left
 border-width:@w;
 border-color:transparent @c transparent transparent;
 border-style:dashed solid dashed dashed;
}

.triangle(@_,@w:5px,@c:grey){ //定义的是@_的样式，只要调用，都必带@_的样式。后面的@w:5px,@c:grey必须写上。
 width:0px;
 height:0px;
 overflow:hidden;
}

.sanjiao{
 .triangle(top)//调用了匹配top的属性值。

//下面这三行是任何情况下都需要有的，为了不必重写。在上面定义一个@_，这是固定格式，无论什么时候，都带上有这个标志的样式。
 width:0px;
 height:0px;
 overflow:hidden;
}

.sanjiao2{
 .trangle(bottom,100px) //这里的调用默认带上@_定义的样式
 .trangle(abc,100px) //虽然没有abc这个匹配，但是一定会带上@_定义的样式，CSS里面可看。
}

less：运算

@test_01:300px;
.box_test{
 width:@test_01 + 20; //可以不带单位，因为test_01带像素单位了。
 height:(@test_01 - 20) * 5;
 color:#ccc - 10; //颜色也可以加减。但基本不用。
}