LESS 是一门 CSS 预处理器，它提供了许多在 CSS 中不可用的功能，如变量、混合、嵌套等等。在 LESS 的世界里，表达式是一个十分基础的概念，在使用 LESS 进行样式开发时，我们往往会涉及到各种各样复杂的数学运算，如加减乘除、比较运算、逻辑运算等等。
在 LESS 中，表达式的求值机制是十分灵活和复杂的，本文将会带你深入探讨 LESS 表达式求值的细节和规则。
变量求值
变量在 LESS 中是一个很重要的概念，通过定义变量，我们可以在后续的代码中引用并更改这些变量的值。在 LESS 中，变量的求值是按照定义顺序进行的，如下述代码所示：
@a: 2; @b: @a + 3; @a: 3;
这段代码定义了两个变量 a 和 b，变量 a 的值被定义为 2，变量 b 的值被定义为 a+3（即 5）。由于 LESS 变量的求值是按照定义顺序进行的，因此在定义变量 b 时，变量 a 的值已经被定义为 2，故 b 的值为 5。而在重新定义变量 a 的值时，变量 b 已经计算完毕且不会再受到影响。
运算符优先级
在 LESS 中，和其它编程语言一样，运算符存在着优先级的问题，需要按照一定顺序进行计算。LESS 运算符优先级从高到低的顺序为：
- 括号：
()； - 否定运算：
not； - 乘法运算：
*、/、%； - 加法运算：
+、-； - 关系运算：
<、>、<=、>=； - 等式运算：
=、<>； - 逻辑运算：
and、or。
下面，我们通过一些示例来理解运算符优先级问题：
@a: 5; @b: 3; @c: 4; @d: @a * @b + @c; // d 的值为 19
在这个例子中，先进行了乘法运算 @a * @b，再加上 @c，所以 @d 的值为 19。
@a: 5; @b: 3; @c: 4; @d: @a + @b * @c; // d 的值为 17
在这个示例中，先进行了乘法运算 @b * @c，再加上 @a，所以 @d 的值为 17。
单位的处理
在 LESS 中，单位也是一个很重要的概念。在计算表达式时，LESS 会自动对有着相同单位的值进行数学运算，并将结果的单位赋给计算结果。如果是不同单位的值进行数学运算，则按照 CSS 规范进行自动转换。
下面，通过一些列子来说明 LESS 如何处理不同单位的值：
@a: 5px; @b: 10px; @c: 2; @d: @a + @b + @c; // d 的值为 17px
在这个示例中，LESS 可以理解为 @d 的值应该为 5px + 10px + 2，计算出结果后，单位自动变成了 px。
@a: 100%; @b: 20px; @c: 50%; @d: @a - @b / @c; // d 的值为 60%
在这个示例中，LESS 首先会将 20px 转换成与 @a 相同的百分比单位，即 20/100=0.2。接着，LESS 根据 CSS 规范进行计算：100% - 50%*0.2 = 60%。
@a: 5; @b: 10%; @c: 50px; @d: @a + @b / @c; // d 的值为 5.2
在这个示例中，由于 @c 的单位为 px，无法与百分比单位 @b 进行运算，因此 LESS 报错。
四舍五入
在 LESS 中，四舍五入是一个很常见的操作，它用于处理对小数进行精确控制的需要。LESS 提供了内置函数 round 和 ceil 用于数值的四舍五入和向上取整。
@a: 5.8; @b: ceil(5.8); // b 的值为 6 @c: round(5.4); // c 的值为 5
函数的执行顺序
在 LESS 中，函数的执行顺序是先执行内部的函数，然后再执行外部函数。因此，如果一个函数作为另一个函数的参数，内部函数会先执行，然后将结果传递给外部函数。
@a: 5; @b: 10; @c: percentage(@a / @b); // c 的值为 50%
在这个示例中，先执行了 @a / @b 的计算，然后将结果传递给 percentage 函数，最终得到 50% 的结果。
结论
通过本文的阐述，我们了解到了 LESS 表达式求值机制的许多重要规则和细节，这些表象看似简单，其背后却涉及到了许多底层计算和转换的细节。在开发过程中，了解这些规则以及它们的工作原理，可以帮助我们解决许多困难的问题，提高样式代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770a2e3e9a7045d0d7f415b
