less语法规范看这一篇就够了~

定义变量说明

值变量

@color: #999;
#wrap { color: @color; }

// 输出
#wrap { color: #999; }

选择器变量

@Wrap: wrap;
.@{Wrap}{ color:#ccc; }

// 输出
.wrap{ color:#ccc; }

属性变量

@borderStyle: border-style; 
@Soild:solid; 
#wrap{ 
    @{borderStyle}: @Soild;//变量名 必须使用大括号包裹 
} 

// 输出
#wrap{ 
    border-style:solid; 
}

url 变量（项目结构改变时，修改其变量即可）

@images: "../img";//需要加引号
body { 
    background: url("@{images}/dog.png");//变量名 必须使用大括号包裹 
} 

// 输出
body { 
    background: url("../img/dog.png"); 
}

声明变量

@background: {background:red;}; 
#main{ 
    @background(); 
}

// 输出
#main{ 
    background:red; 
}

值变量运算

@width:300px; 
@color:#222; 
#wrap{ 
    width:@width-20; 
    color:@color*2; 
    background-color:@color + #111; 
} 

// 输出
#wrap{ 
    width:280px; 
    color:#444; 
    background-color:#333; 
}

& ：代表的上一层选择器的名字

#header{
  &:after{
    content:"Less is more!";
  }
  .title{
    font-weight:bold;
  }
  &_content{//理解方式：直接把 & 替换成 #header
    margin:20px;
  }
}

// 输出
#header::after{
  content:"Less is more!";
}
#header .title{ //嵌套了
  font-weight:bold;
}
#header_content{//没有嵌套！
  margin:20px;
}

定义私有样式

#main{
  &.show{
    display:block;
  }
}
.show{
  display:none;
}

// 输出
#main.show{ 
    display:block;
} 
.show{ display:none; } //会被覆盖。 

样式嵌套

#card(){ 
    background: #723232; 
    .d(@w:300px){ 
        width: @w; 
        #a(@h:300px){ 
            height: @h;
        } 
    } 
}
// 选择#a元素
#wrap{ 
    #card > .d > #a(100px); // 父元素不能加 括号 
}

// 输出
#wrap{ 
    height:100px; 
}

条件筛选(when运算符相当于if)

// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
.border(@width,@color,@style) when (@width>100px) and(@color=#999){ 
    border:@style @color @width; 
}

// not 运算符，相当于 非运算 !，条件为 不符合才会执行 
background(@color) when not (@color>=#222){ 
    background:@color; 
}

// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行 
.font(@size:20px) when (@size>50px) , (@size<100px){ 
    font-size: @size; 
}

总结示例

// 值变量与运算

@width:300px;

@height:200px;

@color:#222;

  


@Wrap: wrap; // 选择器变量

// 属性变量

@borderStyle: border-style;

@Soild:solid;:style

  


// 声明变量

@background: {background:red;};

.card { 

    box-shadow: 0 1px 2px rgba(151, 151, 151, .58); 

}

  


@images: "../img"; // url变量

  


// 样式嵌套

#card(){

    background: #723232;

    .d(@w:300px){

        min-width: @w;

        #a(@h:300px){

            min-height: @h;

        }

    }

}

  


  


.@Wrap{
    // 值变量
    width:@width; 

    // 值变量运算
    height: @height-20; 
    color:@color*2;
    background-color:@color + #111;

    // 属性变量
    @{borderStyle}: @Soild; 

    // 声明变量
    @background(); 
    .card() !important // 或.card，方法名后+!important
    
    // url变量
    background: url("@{images}/dog.png"); 

    // &方法
    &::after{
       content:"Less is more!";
    }

    .title{
       font-weight:bold;
    }

    &_content{ //理解方式：直接把 & 替换成 .wrap
       margin:20px;
    }
    
    // 样式嵌套(只添加了子项的样式)
    #card .d(200px)
    #card > .d > #a(100px); // 父元素不能加括号
    
    // 条件筛选
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }
    background(@color) when not (@color>=#222){
        background:@color;
    }
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}



// 输出
.wrap{
    // 值变量
    width:300px;

    // 值变量运算
    height: 180px;
    color:#444;
    background-color:#333;

    // 属性变量
    border-style:solid;

    // 声明变量
    background:red;
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58) !important;
    background: url("../img/dog.png");  // url变量

    // 样式嵌套
    min-width: 200px;
    min-height: 100px;
    
    // 条件筛选 1false，2true，3false
    background: #222;
}
.wrap::after{
  content:"Less is more!";
}
.wrap .title{ //嵌套了，子项样式会覆盖父项样式
  font-weight:bold;
}
.wrap_content{ //没有嵌套！
  margin:20px;
}