Bootstrap

Less:less运算规则(加减乘除及定义变量)

在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;
}
;