less

less可以说是动态化的css语言，主要是因为他的代码可以复用

less的使用:

在全局npm 安装less  ，并执行lessc less文件路径 编译完成后的css路径，然后把编译后的css文件引入到html就可以了
bootCDN搜索less，然后在html引入

less的功能：
一、 生成变量（并且变量是可以运算的）


@变量名:变量值;


@color:#fff+#111


变量选择器


@remind:.alert;
@{remind}{
    height:50px
}





变量拼接


@v1:lunbotu;
@v2:container;
//变量拼接(.lunbotu-container)
@swiper-container:~'.@{v1}-@{v2}'





二、媒体查询
header{
    height:100px;
    background:red;
    @media(max-width:1200px)and (min-width:992px){
         background:yellow;
    }
        
}

三、混入


就是把一个类的样式，混入到另一个类中


并且在此过程中还可以传递参数


.test{
    font-size:10px
}
.abc(@color){
    color:@color
}
.base{
    .test()
    .abc(red)
}



四、循环
循环一个**.col-md-1到.col-md-12**的类并且每个类的宽度都是不同值。
.loop(@n,@i:1) when (@i<=@n){}就相等于写了一个if判断
.loop(@n,(@i+1))就相当于写了一个for循环
总结：这个函数整体就是一个带if判断的for循环

五、注意:

在写hover，after等时要加&

1.LESS是应用比较广泛的预处理器，
就想JQuery是js的一个框架，
可以把Less理解为相当于是CSS的一个小框架，一个库。


2.Less 是基于JavaScript的，在bootstrap中LESS用的比较多。
3.Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。
Less 是一门预处理语言，支持变量、mixin、函数等额外功能。对于希望使用
 Less 源码而非编译而来的 CSS 文件的用户，
Bootstrap 框架中包含的大量变量、mixin 将非常有价值。
4.Less通过解析器生成CSS。
5.Koala可以将自己写的Less转换成CSS文件。
6.Less定义变量的方法：
@变量:值
如：@color:red
但是如果是图片路径的话，就有点小小的不同了，
如：@myurl:"1.jpg";
使用时：background:url('@{myurl}')
 no-repeat;             (要添加一个花括号{ } 在@ 后面)


7.Less嵌套
&表示自己

8.Less混合

Less：
编译方法：
koala(http://koala-app.com/index-zh.html )
node.js
浏览器端
 
1.变量定义：@变量名:值；
@test1:120px;
 
2.混合：css可以嵌套(可带参数)
.box{

  width: 
@test1;

  height: 
@test1;

  background-color: black;

  .border
}


.border{

  border:solid5px pink;
}
 
参数
.border_02(@width){
  border: solid yellow @width;
}
 
3．匹配模式：
  类似java中的函数。
 
4．运算：
 +-*/
 
5．嵌套规则
.list{
  span{
    float: right;
    color: #ffffff;
  }
  width: 600px;
  margin: 30px auto;
  padding: 0;
  list-style: none;
  li{
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    background-color: #999;
    margin-bottom: 5px;
  }
  a{
    float: left;
    color: #ffffff;
    &:hover{//&代表上一个选择器
      color: red;
    }
  }
}
 
6．@arguments 传全部属性
 
7．避免编译：~’ ’
.test_03 {
  width: calc(300px-30px);
}
 
http://less.bootcss.com/

@import "triangle.less";

// .less可省略
@import "triangle.less";