在less中可以进行加减乘除的运算
在less中,一般运算符在进行加、减计算之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。
下面用一个例子来解释
less文件
@col: #123456;
.color(@c) {
color: @c+@col;
}
.border(@width: 1px) {
border-top: (@width / 2);
border-radius:@width * 5;
}
.textarea1 {
.border(2px);
.color(#111111);
}
css文件
.textarea1 {
border-top: 1px;
border-radius: 10px;
color: #234567;
}
在less中不仅数字,任何颜色,变量也可以参与运算。
在颜色的运算中,也可以输入‘red’等,颜色值会先转换为 rgb 模式,然后再转换为 16 进制的颜色值并返回。
注意
- 运算符中间左右最好用空格隔开
- 除法需要加()