less

1.变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}
输出：
#header {
  color: #6c94be;
}

2.嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
输出：
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

嵌套指令和冒泡:

诸如media或的指令keyframe可以与选择器相同的方式嵌套。指令放在最上面，并且相对于同一规则集中其他元素的相对顺序保持不变。这称为起泡。
条件指令，例如@Media，@supports并且@document也将选择器复制到其主体中：

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}
输出：
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

其余的无条件指令（例如font-face或keyframes）也会冒泡。他们的身体没有改变：

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}
输出：
#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}