一、变量
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
二、混合 （将一组属性从一个规则集包含到另一个规则集的方法）
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
如果我们想要在其他规则集中使用该样式，就使用 .bordered() 即可；
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
三、嵌套
将原来的
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
改写成：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
用& 表示当前选择器的父级；
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
四、运算
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
@base: 5%;@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
calc() 在写原来的写法中是这样的：
div {
width : calc(100%- 30px);
}
但是在less中是不允许的；可以写成 width: calc(~"100% - 30px");
或者这样：
div {
@diff : 30px;
width : calc(~"100% - @{diff}");
}
