less--注释、变量、嵌套规则

注释
以//开头的注释不会被编译到CSS文件中
以/* */开头的注释会被编译到CSS文件中

变量
使用@声明一个变量： @pink: pink
1、作为属性值直接使用： @pink
2、作为选择器或属性名使用： @{pink}
3、作为url： @{url}
4、变量的延迟加载： 
    *{
        @pink: pink
        color: @pink; //black
        @pink: black
    }

嵌套规则
1、基本嵌套规则
2、&的使用 如： &:hover{}

混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1、普通混合

    .box1{
       width:100px;
        height:100px;
        background-color: #0000FF;
    }
    .box2{
        width:100px;
        height:100px;
        background-color: #0000FF;
    }  

 

2、不带输出的混合

.style{
    width:100px;
    height:100px;
    background-color: #0000FF;
}

    .box1{
        .style;
    }
    .box2{
        .style;
    }    

 

3、带参数的混合

.style(@width,@height,@color){
    width:@width;
    height:@height;
    background-color: @color;
}

.box1{
    .style(100px,100px,red);
}
.box2{
    .style(200px,200px,blue);
}

 

4、带参数并且有默认值的混合

.style(@width: 100px,@height:100px,@color:red){
    width:@width;
    height:@height;
    background-color: @color;
}

.box1{
    .style();
}
.box2{
    .style(100px,200px,blue);
}

 

5、命名参数

.style(@width: 100px,@height: 100px,@color){
    width:@width;
    height:@height;
    background-color: @color;
}

.box1{
    .style(@color: red);
}
.box2{
    .style(@height: 200px,@color: blue);
}

 

6、匹配模式

.style(@_){
    width:0;
    height:0;
}

.style(T,@width,@color){
    border:@width solid;
    border-color:@color transparent transparent transparent;
}

.style(R,@width,@color){
    border:@width solid;
    border-color:transparent @color transparent transparent;
}

.style(B,@width,@color){
    border:@width solid;
    border-color:transparent transparent @color transparent;
}

.style(L,@width,@color){
    border:@width solid;
    border-color:transparent transparent transparent @color;
}

.box1{
    .style(T,100px,grey);
}

 

7、arguments变量

.style(@1,@2,@3){
    width:100px;
    height:100px;
    border: @arguments;
}

.box1{
    .style(1px,solid,red);
}

 

运算　　可以进行加减乘除

.style(@1,@2,@3){
    width:100 + 100px;
    height:100px;
    border: @arguments;
}

 

继承

一种是：

<selector>:extend(.style) { }

 

另一种是：

<selector> {
    &:extend(.style);
}

 

避免编译

导入less文件： @import '路径';

转载自：https://www.cnblogs.com/huangyuanning/p/11873391.html