LESS 是一种 CSS 预处理器，它可以在 CSS 基础上提供更多的功能和语法，例如变量、函数、混合、嵌套等。其中，运算符是 LESS 中非常重要的一部分，它可以帮助我们更加灵活地进行样式的计算和操作。本文将介绍 LESS 中常用的运算符及其使用方法，并提供示例代码，帮助读者更好地理解和掌握。
算术运算符
LESS 中的算术运算符包括加法（+）、减法（-）、乘法（*）和除法（/），它们可以用于计算任何数值类型的值，例如长度、时间、角度等。下面是一些示例：
@width: 100px; @height: 50px; @area: @width * @height; // 计算面积 @half: @width / 2; // 计算一半的宽度 @angle: 45deg; @rotate: @angle + 90deg; // 计算旋转角度
上面的代码中，我们定义了一个宽度和一个高度，然后使用乘法运算符计算了它们的面积，使用除法运算符计算了一半的宽度，使用加法运算符计算了旋转角度。需要注意的是，LESS 中的运算符不仅可以计算数值类型的值，还可以计算颜色类型的值，例如：
@color1: #ff0000; @color2: #00ff00; @color3: #0000ff; @mix: mix(@color1, @color2, 50%); // 混合两种颜色 @lighten: lighten(@color3, 20%); // 变亮一些
上面的代码中，我们定义了三种颜色，然后使用 mix 函数混合了前两种颜色，使用 lighten 函数将第三种颜色变亮了一些。
比较运算符
LESS 中的比较运算符包括等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）和小于等于（<=），它们可以用于比较任何数值类型的值。下面是一些示例：
@number1: 10; @number2: 20; @result1: @number1 < @number2; // 判断是否小于 @result2: @number1 == @number2; // 判断是否相等 @result3: @number1 + 5 >= @number2; // 判断是否大于等于
上面的代码中，我们定义了两个数字，并使用比较运算符进行了比较，得到了三个布尔值。
逻辑运算符
LESS 中的逻辑运算符包括与（and）、或（or）和非（not），它们可以用于组合多个比较表达式。下面是一些示例：
@number1: 10; @number2: 20; @number3: 30; @result1: @number1 < @number2 and @number2 < @number3; // 判断是否同时满足两个条件 @result2: @number1 > @number2 or @number2 > @number3; // 判断是否满足任意一个条件 @result3: not (@number1 == @number2); // 判断是否不相等
上面的代码中，我们定义了三个数字，并使用逻辑运算符进行了组合，得到了三个布尔值。
字符串运算符
LESS 中的字符串运算符包括加法（+）和拼接（~），它们可以用于连接多个字符串。下面是一些示例：
@string1: "Hello"; @string2: "world"; @string3: @string1 + ", " + @string2; // 使用加法运算符连接字符串 @string4: @string1 ~ ", " ~ @string2; // 使用拼接运算符连接字符串
上面的代码中，我们定义了两个字符串，并使用加法运算符和拼接运算符分别连接了它们。
赋值运算符
LESS 中的赋值运算符包括等号（=）和冒号（:），它们可以用于定义变量和属性。等号用于定义普通变量，而冒号用于定义属性变量。下面是一些示例：
@color: #ff0000; // 定义颜色变量
@font: {
color: @color; // 定义属性变量
size: 16px;
};上面的代码中，我们定义了一个颜色变量和一个属性变量，属性变量中使用了颜色变量。
总结
LESS 中的运算符是一种非常强大的工具，它可以帮助我们更加灵活地进行样式的计算和操作。本文介绍了 LESS 中常用的算术运算符、比较运算符、逻辑运算符、字符串运算符和赋值运算符，并提供了相应的示例代码。希望本文能够帮助读者更好地理解和掌握 LESS 中的运算符，从而提高前端开发的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d77a691886fbafa4549011