在前端开发中，LESS 是一个非常流行的 CSS 预处理器，它可以让我们写出更加简洁、易维护和可复用的样式代码。在使用 LESS 的过程中，我们可能会遇到一些编译错误，比如常见的 ParseError: Missing ')', got '}' 错误。这种错误通常出现在 @each 循环中，本文将介绍这种错误的原因和解决方法。
问题描述
假设我们有一个变量列表，其中包含了多个颜色值：
@colors: red, green, blue;
我们希望通过一个 @each 循环来生成一组样式，其中每个样式都对应一个颜色值。具体代码如下：
@each $color in @colors {
.color-#{$color} {
color: $color;
}
}这段代码的作用是生成三个样式，分别为 .color-red、.color-green 和 .color-blue，并且每个样式的 color 属性值分别对应 red、green 和 blue。然而，当我们尝试编译这段代码时，很可能会遇到以下错误：
ParseError: Missing ')', got '}'
这个错误的意思是缺少右括号，但实际上我们的代码中并没有明显的缺少右括号的问题。那么这个错误是怎么产生的呢？如何解决呢？
问题原因
这个错误的原因其实很简单：LESS 编译器在处理 @each 循环时，会将循环体中的代码片段视为一个整体，因此如果循环体中的代码片段中存在左花括号 {，就必须要有一个对应的右花括号 }，否则就会出现缺少右括号的错误。在上面的代码中，我们的循环体中存在一个左花括号 {，但是缺少了对应的右花括号 }，因此就会出现错误。
解决方法
要解决这个问题，我们可以采用两种方法。
方法一：使用括号
第一种方法是在循环体中的代码片段外面加上一对括号，这样就可以显式地指定循环体的边界，从而避免缺少右括号的错误。具体代码如下：
@each $color in @colors {
.color-#{$color} {
color: $color;
}
}改为：
@each $color in @colors {
.color-#{$color} {
color: $color;
}
}这个方法的原理是利用括号将循环体中的代码片段括起来，从而避免缺少右括号的错误。这种方法比较简单，但是可能会影响代码的可读性和维护性。
方法二：使用 mixin
第二种方法是使用 mixin，将循环体中的代码片段封装成一个 mixin，然后在循环体中调用这个 mixin。具体代码如下：
-- -------------------- ---- -------
-------------- -
--------------- -
------ -------
-
-
----- ------ -- ------- -
---------------
-这个方法的原理是利用 mixin 将循环体中的代码片段封装起来，然后在循环体中调用这个 mixin，从而避免缺少右括号的错误。这种方法比较灵活，可以根据需要自由组合和调用 mixin，但是可能会增加代码的复杂度和维护成本。
总结
LESS 是一个非常强大的 CSS 预处理器，但是在使用过程中可能会遇到一些编译错误，比如 ParseError: Missing ')', got '}' 错误。这个错误通常出现在 @each 循环中，原因是循环体中的代码片段缺少右括号。要解决这个问题，我们可以采用两种方法：使用括号或者使用 mixin。无论采用哪种方法，我们都需要注意代码的可读性和维护性，避免过度复杂化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/667f570adc1ed1a61be49572