变量（Variables）
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
编译为：
#header {
color: #6c94be;
}
混合（Mixins）
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
编译为：
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
像素比
@media (min-resolution: 192dpi)
192dpi = 96dpi*2 = 1 * 2dpx =2dpx 2倍像素比
calc() 特例计算变量和数学公式
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px))
Escaping
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译为：
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
函数（Functions）
@base: #f04615;
@width: 0.5;
percentage 函数将 0.5 转换为 50%，
saturate 颜色饱和度增加 5%
lighten 颜色亮度降低 25%
spin 色相值增加 8
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
Namespaces and Accessors 命名空间与存取
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
}
Now if we want to mixin the .button class in our #header a, we can do:
#header a {
color: orange;
#bundle > .button; // can also be written as #bundle.button
}
作用域（Scope）
Scope in Less is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on.
less作用域，类似于编程语言，先在本地查找，没有的话，向上级查找
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
