变量
可以设置变量,同一个变量可以重复被使用。
@width: 10px;
#header{
width: @width;
}
编译:
header{
width: 10px;
}
混合
混合是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。
.test{
width: 10px;
}
.main{
.test();
height: 10px;
}
编译:
.main{
width: 10px;
height: 10px;
}
嵌套
#header{
width: 100px;
.logo{
height: 100px;
}
}
#heaher{
width: 100px
}
#header .logo{
height: 100px
}
运算
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:px 到 cm 或 rad 到 % 的转换。
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
转义
转义(Escaping)允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出,除非 interpolation
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译:
element {
@media (min-width: 768px) {
font-size: 1.2rem;
}
}
命名空间和访问符
有时,出于组织结构或仅仅是为了提供一些封装的目的,你希望对混合(mixins)进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合(mixins)和变量置于 #bundle 之下,为了以后方便重用或分发。
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
现在,如果我们希望把 .button 类混合到 #header a 中,我们可以这样做:
#header a {
color: orange;
#bundle.button(); // 还可以书写为 #bundle > .button 形式
}
映射
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
编译:
.button {
color: blue;
border: 1px solid green;
}
作用域
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
注释
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了!
@var: white;
导入
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名,则可以将扩展名省略掉
@import "library"; // library.less
@import "typo.css";