在前端开发中，我们经常会使用 LESS 这种 CSS 预处理器来提升开发效率。但是，在使用 LESS 编译过程中，我们有时会遇到错误，其中一种常见的错误就是 LESS 编译出现了“预期 ‘，’ 而得到了 ‘}’”的错误。
问题描述
当我们在 LESS 文件中书写代码时，如果不小心将逗号（,）写成了右大括号（}），那么在编译的过程中就会出现“预期 ‘，’ 而得到了 ‘}’”的错误，如下所示：
-- -------------------- ---- -------
-- ---------
------- -----
---- -
----------------- -------
------- --- ----- -----
-------- -----
------- --
---------- -----
------------ ---------- ------- -----------
---- -
------ -----
------- ------
----------------- -----
-------------- ----
----------- - - ---- ------- -- -- ----
- -- ---------
------ -
---------- -----
------------ -----
------ -----
----------- -------
-------------- -----
-
-在编译的过程中，LESS 会提示如下错误：
ParseError: Unrecognised input in main.less on line 15, column 3:
14 .box {
15 width: 100%;
^
16 height: 200px;这个错误提示比较简洁，只是告诉我们在第 15 行第 3 列出现了错误，但是并没有告诉我们具体是什么错误。如果我们不仔细查看 LESS 文件，很容易就会忽略掉这个问题。
问题分析
在 LESS 中，逗号（,）的作用是分隔多个属性值，例如：
.box {
box-shadow: 0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3);
}在这个例子中，我们使用逗号将两个 box-shadow 属性值分隔开来，这是 LESS 中常见的写法。
而右大括号（}）的作用是结束一个选择器块，例如：
.box {
width: 100%;
height: 200px;
}在这个例子中，我们使用右大括号结束了 .box 选择器块。
如果我们在 LESS 文件中将逗号写成了右大括号，那么编译器就会认为我们想要结束一个选择器块，但是此时并没有开始选择器块，因此就会出现“预期 ‘，’ 而得到了 ‘}’”的错误。
解决方法
解决这个问题的方法很简单，只需要在 LESS 文件中找到出错的那行代码，将右大括号（}）改成逗号（,）即可，如下所示：
-- -------------------- ---- -------
-- ---------
------- -----
---- -
----------------- -------
------- --- ----- -----
-------- -----
------- --
---------- -----
------------ ---------- ------- -----------
---- -
------ -----
------- ------
----------------- -----
-------------- ----
----------- - - ---- ------- -- -- ----
- - ---- ------- -- -- ---- -- -------
-
------ -
---------- -----
------------ -----
------ -----
----------- -------
-------------- -----
-
-修改后的代码就可以正常编译了。
总结
LESS 编译出现“预期 ‘，’ 而得到了 ‘}’”的错误，是因为我们不小心将逗号写成了右大括号，从而导致编译器无法识别代码。解决这个问题的方法很简单，只需要将右大括号改成逗号即可。
在编写 LESS 代码时，建议大家先写好代码，再仔细检查一遍，确保没有语法错误。如果遇到问题，可以先查看编译错误的具体信息，再进行分析和解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6615f494d10417a2225d56d3