变量的设置

@color:red;
html{
  color:@color
}
    

html {
  color: #ff0000;
}

混合使用

例子一

.padding{
    padding: 0.5rem 0.625rem;
}
.nav-wrapper{
    .padding;
    background-color: #EFF3F7;
    font-size: 0;
}

.padding {
  padding: 0.5rem 0.625rem;
}
.nav-wrapper {
  padding: 0.5rem 0.625rem;
  background-color: #EFF3F7;
  font-size: 0;
}

混合使用延申1

.padding{
    padding: 0.5rem 0.625rem;
}
.nav-wrapper(@bgcolor) {
  .padding;
  background-color: @bgcolor;
  font-size: 0;
}

html{
  .nav-wrapper(yellow)
}

.padding {
  padding: 0.5rem 0.625rem;
}
html {
  padding: 0.5rem 0.625rem;
  background-color: #ffff00;
  font-size: 0;
}

混合使用延申2

.padding{
    padding: 0.5rem 0.625rem;
}
.nav-wrapper(@bgcolor:#EEEEEE) {
  .padding;
  background-color: @bgcolor;
  font-size: 0;
}
html{
.nav-wrapper()  
}

.padding {
  padding: 0.5rem 0.625rem;
}
html {
  padding: 0.5rem 0.625rem;
  background-color: #eeeeee;
  font-size: 0;
}

@_匹配模式

.triangle(top, @width: 5px, @color: #ccc) {
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

.triangle(right, @width: 5px, @color: #ccc) {
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed;
}

.triangle(bottom, @width: 5px, @color: #ccc) {
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed;
}

.triangle(left, @width: 5px, @color: #ccc) {
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid;
}
.triangle(@_, @width: 5px, @color: #ccc) {
//不同命名的公共部分要这样写，必须是@_，表示公共部分
    width: 0;
    height: 0;
    overflow: hidden;
}
.triangle-top {
    .triangle(top, 30px);
}

.triangle-top {
  border-width: 30px;
  border-color: #cccccc transparent transparent transparent;
  border-style: solid dashed dashed dashed;
  width: 0;
  height: 0;
  overflow: hidden;
}

运算

@width:20px;
html{
    width:@width - 5;
}

html {
  width: 15px;
}

嵌套规则

arguments变量

.border_arg(@width: 1.75rem, @color: #e6e6e6, @style: solid) {
    border: @arguments
}
.border_arguments {
    .border_arg(0.375rem); //传参的思想
}
html{
    .border_arguments()
}

.border_arguments {
  border: 0.375rem #e6e6e6 solid;
}
html {
  border: 0.375rem #e6e6e6 solid;
}

避免编译符号 ~