Less预处理器的使用
练习页面：
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>第一：基本使用
less使用嵌套的方式实现子类或者后代选择器：
1，实现后代选择器
使用大括号嵌套表示祖先和后代之间的关系
.div1{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
.div2{
position: absolute;
width: 50px;
height: 50px;
background-color:black;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
}编译之后
.div1 {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
}
.div1 .div2 {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}变量的使用：
使用方法：通过@变量名：变量值的方式来定义变量；使用变量规则：若该变量表示的是样式的属性值，使用@变量名；如果该变量表示的是一个样式的属性或者选择器或者一个url时，则使用：@{变量名}的方式引入。
@colorBGC:black;/*定义属性值变量*/
@posi:position;/*定义属性变量*/
@selecter:div2;/*定义选中器变量*/
.div1{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
.@{selecter}{/*使用选择器变量*/
@{posi}: absolute;/*使用属性变量*/
width: 50px;
height: 50px;
background-color:@colorBGC;/*使用属性值变量*/
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
}编译结果和上一步编译成的css结果一样。
变量的延迟加载：定义变量尽量定义在全局，如果定义在使用之后，加载同一个同名变量会加载最后一个变量作为其变量名。同时变量还有域的概念，先在本作用域找变量，在到其祖先选择器找变量。
@v:1;
.div1{
@v:2;
.div2{
@v:3;
top:@v;
@v:4;
}
height: @v;
}输出结果为：
.div1 {
height: 2;
}
.div1 .div2 {
top: 4;
}
由此可看出，变量首先赋值，再使用。
2,&的使用
&表示的是平级，通常使用在并集选择器或者伪类伪元素之中
@colorBGC:black;/*定义属性值变量*/
@posi:position;/*定义属性变量*/
@selecter:div2;/*定义选中器变量*/
div{
.@{selecter}{/*使用选择器变量*/
@{posi}: absolute;/*使用属性变量*/
width: 50px;
height: 50px;
background-color:@colorBGC;/*使用属性值变量*/
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
&:hover{/*表示选择器 div div2：hover */
background-color:red;
}
}
&.div1{/*表示选择器 div.div1 */
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
}
}输出结果为：
div .div2 {
/*使用选择器变量*/
position: absolute;
/*使用属性变量*/
width: 50px;
height: 50px;
background-color: black;
/*使用属性值变量*/
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
div .div2:hover {
background-color: red;
}
div.div1 {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
}第二：混合mixins
1，普通混合
通过定义样式规则的方式，通过样式规则名引用规则就可；
样式规则：
.样式规则名（args）{
样式.....
}引用：
.样式规则名（args）注意：可以不转参数或者省略小括号，省略小括号表示的是将该规则编译到css文件中。
.guize(){//定义混合
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
}
div{
.guize;//引入混合
.div2{
position: absolute;
width: 50px;
height: 50px;
background-color:red;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
&:hover{
background-color:blue;
}
}
}2，带参数混合
带参数表示的是变量，通过定义变量，将变量转入混合中。
.guize(@color,@h,@w){//传参的形式
width: @w;
height: @h;
margin: 0 auto;
position: relative;
border: 1px @color solid;
}
div{
.guize(red,200px,200px);//传入参数S
.div2{
position: absolute;
width: 50px;
height: 50px;
background-color:red;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
&:hover{
background-color:blue;
}
}
}可以通过传不同的参数，来实现对不同选择器的相同属性的不同属性值的控制。
3，带参数且有默认值混合
.guize(@color:red,@h:100px,@w:100px){//传参的形式
width: @w;
height: @h;
margin: 0 auto;
position: relative;
border: 1px @color solid;
}
div{
.guize(red,200px,200px);//传入参数S
.div2{
position: absolute;
width: 50px;
height: 50px;
background-color:red;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
&:hover{
background-color:blue;
}
}
}如果我们少少传参数的时候，它会按照顺序进行匹配，此时如果传一个200px传给@w，则@color的值会是一个200px，不符合，此时可以通过命名参数实现对应传参。在调用的时候使用： .guize(@w：200px)就可将数据传给@w。
4，匹配混合
如我们画三角形，想要获取对应方向的三角形，需要一个个的动手换样式。为了代码复用，我们可以将四个方向的三角形样式都定义在一个文件中，然后再引入，通过特定的标识来匹配不同的样式：
四个角的样式：
.guize(@_){
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
}
.guize(R){
border-color: transparent red transparent transparent;
}
.guize(T){
border-color: red transparent transparent transparent ;
}
.guize(L){
border-color: transparent transparent transparent red;
}
.guize(B){
border-color: transparent transparent red transparent;
}注意：将相同的样式定义在同名函数内，通过参数@_ 可以实现在编译的时候将样式编译到被匹配的样式中去。
匹配调用：
获取上三角
@import ‘./guize.less’
.div1{
height: 200px;
width: 200px;
border: blueviolet solid 1px;
.div2{
.guize(T);
}
}获取下三角：
@import ‘./guize.less’
.div1{
height: 200px;
width: 200px;
border: blueviolet solid 1px;
.div2{
.guize(B);
}
}注意：这个就是画三角形的API。
5，@arguments混合
就是在传参的使用，直接通过@arguments获取实参列表而不是一个个写。
.guize(@1,@2,@3){
border:@arguments;
}
.div1{
height: 200px;
width: 200px;
border: blueviolet solid 1px;
.div2{
height: 50px;
width: 50px;
.guize(red,solid,1px);
}
}编译后：
.div1 {
height: 200px;
width: 200px;
border: blueviolet solid 1px;
}
.div1 .div2 {
height: 50px;
width: 50px;
border: red solid 1px;
}第三：less计算
less中的可计算值数值可以实现加减乘除运算（加入计算的数值只需要一个数值有单位就可，都有也可以）
.guize(@1,@2,@3){
border:@arguments;
}
.div1{
height: 200px;
width: 200px;
border: blueviolet solid 1+2px;//计算
.div2{
height: 50px;
width: 50px;
.guize(red,solid,1px);
}
}编译：
.div1 {
height: 200px;
width: 200px;
border: blueviolet solid 3px;/*结果为3px*/
}
.div1 .div2 {
height: 50px;
width: 50px;
border: red solid 1px;
}
浙公网安备 33010602011771号