LESS是一种预编译器语言，用于将CSS进行扩展，提供了比原生CSS更多的功能，使得前端开发更为高效和灵活，其中函数和运算符是LESS中的两个重要特性，本文将详细介绍LESS中的函数和运算符，并提供示例代码。
LESS中的函数
LESS中的函数是常用的工具函数，用于简化样式的编写和操作，常见的函数如下：
CSS3函数
可以通过CSS3函数定义样式，如：:
div {
border-radius: @radius;
transform: rotate(45deg);
transition: all 0.5s;
}这里的border-radius、transform和transition就是CSS3函数。
数学函数
在LESS编写样式的过程中，可能需要进行数学运算，LESS中提供了一系列的数学函数。
ceil()
将数向上取整
@ceilNum:ceil(4.4); //输出结果为5
floor()
将数向下取整
@floorNum:floor(4.6); //输出结果为4
round()
将数四舍五入
@roundNum:round(4.5); //输出结果为5
abs()
返回数的绝对值
@absNum1:abs(-5); //输出结果为5 @absNum2:abs(5); //输出结果为5
sqrt()
返回数的平方根
@sqrtNum:sqrt(9); //输出结果为3
sin()
返回数的正弦值
@sinNum:sin(45deg); //输出结果为0.7071067811865476
颜色函数
LESS中提供了一些颜色函数，可以用来操作颜色值。
lighten()
给当前颜色亮度添加指定的值
@color:#00ff00; @lightenColor:lighten(@color, 10%);
darken()
给当前颜色亮度减去指定的值
@color:#00ff00; @darkenColor:darken(@color, 10%);
saturate()
给当前颜色添加饱和度
@color:#ff0000; @saturateColor:saturate(@color, 10%);
desaturate()
给当前颜色减少饱和度
@color:#ff0000; @desaturateColor:desaturate(@color, 10%);
fadein()
给当前颜色透明度增加指定的值
@color:rgba(255,0,0,0.5); @fadeInColor:fadein(@color, 10%);
fadeout()
给当前颜色透明度减少指定的值
@color:rgba(255,0,0,0.5); @fadeOutColor:fadeout(@color, 10%);
其他函数
还有一些其他函数，用于辅助样式的生成。
unit()
将数字转换为指定的单位
@unitNum:unit(12px); //输出结果为12 @unitString:unit(12px, em); //输出结果为"1.2em"
color()
返回颜色值
@colorval:color(#ff0000); //输出结果为"ff0000"
LESS中的运算符
LESS中的运算符和原生CSS中的运算符类似，不过增加了一些扩展的运算符，如:
算术运算符
LESS中的算术运算符主要包括加、减、乘、除和取模。
@var1: 10 + 20; //输出结果为30 @var2: 20 - 10; //输出结果为10 @var3: 10 * 20; //输出结果为200 @var4: 20 / 10; //输出结果为2 @var5: 20 % 10; //输出结果为0
比较运算符
LESS中的比较运算符主要包括等于、不等于、大于、小于、大于等于和小于等于。
@var1: 10 = 20; //输出结果为false @var2: 10 != 20; //输出结果为true @var3: 10 > 20; //输出结果为false @var4: 10 < 20; //输出结果为true @var5: 10 >= 20; //输出结果为false @var6: 10 <= 20; //输出结果为true
逻辑运算符
LESS中的逻辑运算符主要包括与、或和非。
@var1: true and false; //输出结果为false @var2: true or false; //输出结果为true @var3: not true; //输出结果为false
结语
通过了解LESS中的函数和运算符，我们可以更加方便和灵活地编写样式，并且可以提高我们的开发效率。希望本文能够对读者掌握LESS中的函数和运算符有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782f83e935627c900245d27
