less

 

1. 安装　　

　　npm i less less-loader -S： 安装　

 

　　1. 变量

　　　　必须以@开头、不能包含特殊字符、不能以数字开头、大小写敏感  

//1. 声明变量
@size:200px;
@compony:wjs;
//2. 使用
.box{
    width: @size;
    height: @size;
}
//遇见字符串拼接使用@{变量名称}
.@{company}_nav{
　　width:@size;
}

　　2. mixin混入（相互间调用）

　　　　2.1 样式混入（选择器调用）　　　

//能够被css语法识别的都会编译到css，还是会产生冗余，（推荐函数混入）
.bb{
    border: 1px solid #ccc;
}
#size{
    width:100px;
}
//样式混入
.box{
    .bb();
    #size();
}
//等价于.box{ border:1px solid #ccc; width:100px;}　

　　　　2.2 函数混入

.bb(){
    border: 1px solid #ccc;
}
#size() {
    width:100px;
}
//样式混入
.box{
    .bb();
    #size();
}
//等价于.box{ border:1px solid #ccc; width:100px;}

　　　　　　优化

.float(@fangxinag){
    float:@fangxiang;
}
//如果定义没有默认值必须传参
//若定义了参数，指定了默认值，如果传使用传递的
.box{
    .float(@fangxiang:left); //默认值
    .bb();
    #size();
}    
//等价于.box{ border:1px solid #ccc; width:100px;}

　　3. 嵌套

//<div class="topbar">
//        <div class="container">
//               <div class="row">
//                       <div></div>
//               </div>
//        </div>
//　　　　　<div class="botcontainer"></div>
//</div>
//>div后代选择器
//&：用来连接交集选择器
.topbar{
    width:100px;
    .container{
        .row{
            > div{
                   background:red;
　　　　　　　　　　　 &:last-child{}
　　　　　　　　　　　 &.now{}
            }
        }
    }
　　 .botcontainer{
　　　　background: blue;
　　}
}

　　4. 导入

//有依赖关系，先引入变量在引入模块
//在index中引入各个模块
@import “mixin”
@import "nav"
@import "footer"

　　5. 运算与内置函数

@count:10;
.jd{
    width: 100% *@coount;
}