Less运算(5)

运算(operations)

说明:任何数值,颜色和变量都可以进行运算。

数值型运算

Less会为你自动推断数值的单位,所以不必每个值都加上单位
注意:运算符与值之间必须以空格分开,涉及优先级时以()进行优先级运算

实例:
Less写法

,wp{
    
    
	width:450px + 450;
}

编译结果:

,wp{
    
    
	width:900px;
}

颜色值运算

Less在运算时,先将颜色值转换成 rgb 模式,然后运算完再转换为16进制的颜色值并且返回

注意:既然是转成 rgb 模式, rgb 的取值范围是 0~255 ,所以计算的时候不能超过这个区间,超过后默认使用最大值255计算。
不能直接使用颜色的名称进行运算。

实例:
Less写法

,content{
    
    
	background:#000000 + 21;
}

编译结果:

,content{
    
    
	background:#151515;
}

计算理解
看下图,一开始rgb的值都是 0 ,十六进制是#000000
在这里插入图片描述
加上21后,rgb的值都是 21 ,十六进制的值就是 #151515
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44679078/article/details/111411715