less的常用规则

less的常用规则

1.嵌套

.body{
    p{
        font-size: 6px;
    }
    &:hover{
        font-size: 10px;
    }
    @media all and (min-width:768px){
        width: 600px;
    }
}

2.变量

@width:100px;
div{
    width:@width; //就近原则，且不顺序。转驿后是 width:50px;
    @width:50px;

}

3.插值

@i:3;
@key:margin;
.box@{i}{ // 等同于.box3
    @{key}:auto; //相当于margin:auto
}

4.运算

@num:10px;
.box4{
    width: @num*3;
    height: 20px/3;
    color: @000100*2;
    padding: ~"10px *10"; //保持原样，没有转换
}

5.函数(更多的，看官网)

.box4{
    width: round(3.4px); //四舍五入
    height:percentage(0.3) ; 
    padding:sqrt(25px);//开方
}

6.混入

.stateShow{
    display: block;
}
.new{
    .p{font-size: 100px;}
}
.position(@left,@top){
    position: absolute;
    top:@top;
    left:left ;
}
.box5{
    .stateShow;
    .new.p; //或者 只引入某个类里的某个小类
    .position(10px,20px);
}

7.继承，共用代码

.line{
    display: inline;
}
.box7{
    &:extend(.line)
}
// --上面的，就会变成如下
.line,.box7{
     display: inline;
}

8.条件

.fun1(@x) when (@x>5){
    width: 100px+@x;
}
.fun1(@x) when (@x<5){
    width: @x;
}
.box8{
    .fun1(6);
}

9.循环

.fun2(@y) when (@y<3){
    .box-@{y}{
        width: 100px;
    }
    .fun2(@y+1);
}
.fun2(0);

10.导入其它文件

@import ‘./base.css‘

less的常用规则

原文：https://www.cnblogs.com/ljmin9527/p/13799920.html