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等时要加&
 
 

@import "triangle.less";

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

严格控制版本号
 
npm install less@3.9.0 less-loader@4.1.0 --save-dev
 

 

npm命令如下：
 
npm install less less-loader --save-dev
 
或者 yarn命令如下：
 
yarn add less less-loader --dev
 
建议安装在本地依赖，没必要装全局环境，安装成功后 package.json 如下：
 
 
 
 
要安装全局的话，直接参考less官网：