在less文件中,任何数字、颜色或变量都能参与运算,less提供了+、-*、/算术的运算。
代码示范:
/*在less里写*/
@width:10px + 5;
div {
/*其实就变成了15px的边框*/
border:@width solid skyblue;
}
/*甚至还可以带小括号,比如说下面这种 和数学中的一样,先算小括号再去相乘*/
width:(@width + 5) * 2;
也可以定义一个变量:
@baseFont:50;
div {
/*就等同于88/50 但要记得需要有其中一个数值带单位*/
/*如果两个数值都没有单位,那的出来的值也没有单位*/
width:88rem / @baseFont;
}
注意点:
- 运算符中间左右必须有空格隔开 1px + 5;
- 对于两个不同单位值之间的运算,运算结果的值会取第一个值的单位 18rem + 5px,单位就是rem,不是px;
- 如果两个值之间只有一个值有单位,则运算结果就取该单位
现在的less语法中,除法需要加()或.,比如:
但不推荐.的写法,会提示波浪线错误,更推荐小括号()
.box {
width(100 / 3.65rem);
height:50 ./ 3.65rem;
}