在 LESS 中使用自定义函数可以极大地提高开发效率和代码可读性，但是有时候会出现调用时自动执行的问题，而不是按照我们想要的顺序执行。这个问题一般是因为函数和变量安装了相同的顺序处理导致的，但是解决起来也很简单，本文就来为大家介绍一下如何解决这个问题。
问题复现
以下是一个简单的示例代码，定义了一个自定义函数 my-calc ，它接收两个参数并且返回这两个参数的和。在 box-shadow 样式中使用了这个函数，并传递两个参数作为计算。但是当这个样式被渲染出来时，我们会发现 my-calc 函数被自动执行了。
-- -------------------- ---- -------
-------- -----
------- -
----------- -------- -------- ------------- ----- -----
-
--------------- ------ -
-------- ----- - ------
------ --------
-上述示例代码中，我们期望 box-shadow 样式渲染出来的结果是 box-shadow: 12px 12px 12px #000;，但是实际上输出的结果是 box-shadow: 12px 12px 5px 7px #000;，这是因为 my-calc 函数被自动执行了。
解决方法
要解决这个问题，我们需要先了解一下 LESS 解析器的处理顺序。
LESS 对样式表的处理流程是，先将整个文件解析出来，然后将所有变量和函数替换成对应的值，最后再将样式表转换成 CSS 格式。因此，如果一个函数和一个变量都具备相同的名称，LESS 解析器则会先处理变量，将它转换为对应的值，并且会在执行函数之前将这个值带入到函数中。
因此，为了避免出现调用自动执行的问题，我们需要在函数名和变量名之间留有一些空隙或者使用 LESS 的括号语法来进行明确的区分。以下是一些解决方法：
方法一：添加空格
-- -------------------- ---- -------
-------- -----
------- -
-- --------------
----------- -------- -------- -------- ----- ----- -----
-
--------------- ------ -
-------- ----- - ------
------ --------
-在函数名和变量名之间添加空格是一种简单的解决方法。这样 LESS 解析器就能够正确地理解我们的意图了。
方法二：使用括号
-- -------------------- ---- -------
-------- -----
------- -
-- ----------------
----------- -------- -------- -------------- ------ -----
-
--------------- ------ -
-------- ----- - ------
------ --------
-使用括号来明确表示这是一个函数调用也是一个有效的解决方法，这样解析器就能够知道我们正在调用一个函数，并且将值传递给它。
总结
在 LESS 中使用自定义函数是非常有用的，但是在函数和变量具备相同的名称的时候，需要留意这个问题。为了避免出现调用自动执行的问题，我们需要在函数名和变量名之间留有空隙或者使用括号来进行明确的区分。这样可以保证函数能够按照我们期望的方式调用，从而避免出现问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488812e48841e98946f6a55