less笔记

使用大概介绍：

less类似与jquery,用最少的代码来实现效果
less代码始终都是要编译成css的
less格式的文件中，我们可以像以前一样去写样式和可以使用less语法去写都行。

注释：
在less中可以使用//和/**/注释代码，
使用/**/编译成css会被保留，但是//不会保留在css中

变量：

@test:100px;

div{
    height:@test;
}

混合(可带参数)：

可以理解为定义一个函数，别的地方去调用

@test:100px;

div{
  height:@test;
 .bor(2px); //div就有了.bor的样式
}


.bor(@w:1px){ //其他地方调用有传参数就用参数没有就用默认值1px
  border:@w solid red;
}

匹配模式：

.a(red,@f){
   color:red;
   font-size:@f;
}


.a(yellow,@f){
   color:yellow;
   font-size:@f;
}

.a(@_,@f){ //有了@_表示，不管是哪里调用.a(),里面都会有这些样式
   background:#000;
}


div{
 .a(red,#000) //选择哪个就选择哪个
}

计算：

@a:10px

div{
  height:@a-1;
}

嵌套：

ul{
  border:1px solid #000;
  li:{
     float:left;
     a:{
       color:red:
       &:hover{ color:yellow; } //&表示去找父元素
     }
  }
}


编译后：
ul{border:1px solid #000;}
ul li{float:left;}
ul li a{color:red:}
ul li a:hover{color:yellow;}

获取所有元素：

@arguments

避免less编译

div{
 width:~'calc(100px-10px)' //less不编译直接输出
}

编译less的工具很多，例如node.js   webpack   gulp 都有，这里推荐http://koala-app.com/