标签：包含 for 使用 简单 文件中 就是 方便 代码量 red
以前就使用过less和sass，其实很简单，就是很长时间不用，忘记语法了，现在来总结一片使用技巧
一、注释
less的注释不会被编译到css文件中，所以提倡多使用less中的注释：/**/
二、变量
less语言中也有自己的变量，定义变量@变量名：变量值，使用该变量时，直接@变量名，就是该变量值
@width: 300px;
body { background-color: white; }
.div1 { width: @width; }
三、混合（mixin）
混合可以将一个定义好的class A轻松引入到另一个class B中，从而简单实现class B继承class A中所有属性，还可以带参数地调用。
例如定义一个样式类.border，直接用到另一个样式类.box中，另一个样式类就很方便的具有了这个类的样式，很好的实现了css代码的复用；
再例如有一个.box2，它和.box有一些属性相同，那就直接继承.box再做特定的修改即可：
.border{
border:1px solid black;
}
.box{
.border;
}
.box2{
.box;
margin:20px;
}
混合（mixin）：可带参数，以实现传入变量参数来用一个样式类生成各种不同的样式：
.border2(@border_width){ //定义变量参数
border:@border_width solid black;
}
.box3{
.border2(5px);//参数位置传入变量以控制不同的样式
}
.box4{
.border2(10px);
}
混合（mixin）参数可带默认值（多个参数之间使用逗号隔开）
.border3(@border_width2:5px){
border:@border_width2 solid black;
}
.box5{
.border3();
}
一些常见的兼容性写法就可以用混合封装起来进行简化：
.border_radius(@border_radius:2px){
border-radius:@border_radius;
-moz-border-radius:@border_radius;
}
四、模式匹配
有些情况想根据传入的参数来改变混合的默认呈现，比如：
下面通过less模式匹配，定义不同央视模式的三角（top模式和bottom模式），但无论哪种模式，@_（放在模式参数位置）定义的样式所有模式都公有
.triangle(@_,@w,@c){
width:0;
height:0;
overflow:hidden;
}
.triangle(top,@w,@c){
border-width:@w;
border-color:transparent transparent @c transparent;
borser-style:dashed dashed solid dashed;
}
.triangle(bottom,@w,@c){
border-width:@w;
border-color:transparent transparent @c transparent;
borser-style:solid dashed dashed dashed;
}
.triangle2{
.trangle(bottom,20px,red);
}
.triangle3{
.trangle(top,30px,green);
}
五、运算（对变量进行加减乘除等）
@box_width:100px;
.box6{
width:(@box_width-10)*2;
}
六、嵌套
可以在一个选择器中直接潜逃另一个选择器来实现继承，这样很大程度减少代码量，并且代码看起来结构更清晰：
.list1{
width:600px;
height:600px;
li{//相当于在外边写.list1 li{}
height:20px;
a{
float:left;
&:hover{ //&代表上一层选择器，所以这样写相当于 .list1 a:hove{}
color:red;
}
}
}
}
七、@arguments
@arguments包含了所有传递进来的参数，如果你不想单独处理每一个参数的话就可以像这样写：
.box-shadow(@x:0;@y:0,@blur:1px,color:#000){
box-shadow:@arguments; //相当于（）参数里的值放到了这
-moz-box-shadow:@auguments;
-webkit-box-shadow:@arguments;
}
.box-shaow(2px,5px);
八、避免编译
有时候需要输出一些不正确的css语法或者使用一些less不认识的专有语法
//要输出这样的值我们可以在字符串前加一个~
.class1{
filer:~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
完整的Less中文文档：
http://www.bootcss.com/p/lesscss/
标签：包含 for 使用 简单 文件中 就是 方便 代码量 red
原文地址：https://www.cnblogs.com/learnings/p/8884774.html
