Less

Less类似于jquery，是一个库。相当于css的jQuery.
是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
在less文件中使用/**/注释的文字在导出的css文件里面会显示出来，而使用//注释的文字在导出的css文件里面不会显示出来

变量声明

Less 中 用 @符号声明变量,如：
@width：100px;
使用变量，如：

div{
width:@width;
}

                                                                  less混合

.box{
    background-color:#fff;
   .border;  /*引用border样式*/
}
.border{
   border:1px solid red;
}

 

带参数的混合

.box{
    background-color:#fff;
   .border_02(5px);/*括号里必须带值*/
}
.border_02(@border_width){
   border:@border_width solid yellow;
}

默认混合(不传入参数则走默认值,传入参数则走传进来的这个值)

.border_03(@border_width:10px){
  border:@border_width solid green;
}
.div1{
  .border_03();/*走的是默认值,即10px的边框*/
}
.div2{
  .border_03(15px);/*走的是传递进来的参数,即15px的边框*/
}

 

三角
常规

.sanjiao{
  width:0;
  height:0;
  overflow:hidden;
  border-width:10px;
  border-color: transparent transparent red transparent;
  border-style: dashed dashed solid dashed;
/*写dashed是为了兼容ie6*/
}

匹配模式(类似if)

.triangle(top,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:@c transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent @c transparent transparent;
  border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent transparent @c;
  border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c:#ccc){
  width:0;
  height:0;
  overflow:hidden;
}
.sanjiao1{
  .triangle(right,10px);
}

//匹配模式就是先把各种情况写好，在类名后面传入参数，需要时直接调用，传入@_代表不管哪种情况都要带上这段代码。

//传的哪个参数，用的就是哪个的样式 } 

 .pos(a){ position:absolute } 
.pos(f){ position:fixed; }
 .box{ .pos(f); }

Less运算
可以进行加减乘除运算，只要有一个带像素的即可， 符号两边需要空格
eg:

@test_01:300px;
.box_02{
  width:@test_01 + 20;
  height: (@test_01 - 200) * 5;
  background:#ccc - 10;
}

Less嵌套规则

在父级class下 可以 嵌套class 或者标签
但是最好别嵌套太多层，会影响加载速度。

写：hover直接用&：hover “&代表他的上一级(父)选择器”

eg:

.list{
    list-style: none;
    margin:30px auto;
    padding:0px;
    width:600px;
    li{     /*相当于.list li*/
        height: 30px;
        padding:0 10px;
        background-color: pink;
        line-height: 30px;
        margin:10px;
    }
    a{
        float:left;
        &:hover{  /*& 表示上一层选择器,&符号代表的是父级的类名或者id名,即 a:hover     这里是伪类的用法，详情见Sass博客
        &_nav相当于a_nav*/
        color:red; } 
       } 
span{ float:right; }
 }

 

@arguments包含了所有传递进来的参数。
eg:

 @border（@w：30px，@c：red，@s：solid）{
   border：@w @c @s
}

如果你不想单独处理每一个参数的话就可以像这样写：

.border_arg(@w:30px,@c:red,@ww:solid){
border:@arguments;
/*包含所有参数*/
}
.test_arguments{
.border_arg(40px);     
/*则只把@w的值改为40px，其余照搬*/
}

 less 避免编译 

用符号 ~   
eg：

 ~‘calc(300px-30px)’

，less直接把calc(300px-30px)给到css文件，在被浏览器调用时，浏览器自己运算。
!important 样式优先级别最高 

可以把封装的东西放到一个单独的 less里面，只需要在main.less主文件里面 @import 加文件名 xx 可以省略后缀名. eg: @import a

加载css需要 @import(less)'xxx.css'  @import  写在哪里  编译之后 css内容 就会出现在哪里