LESS 是一种 CSS 预处理器，它能够在 CSS 中引入变量、混合、嵌套规则等特性。但是在使用 LESS 进行编译时，有时会遇到 "Unrecognised input" 错误。本文将帮助你解决这一问题，同时也会介绍一些 LESS 的基本语法和技巧。
什么是 "Unrecognised input" 错误？
当 LESS 编译器遇到不可识别的语句或字符时，就会抛出 "Unrecognised input" 错误。这种错误常常发生在 LESS 文件中包含了非法的 CSS 代码，或者在 LESS 文件中使用了无法识别的 LESS 语法。
下面是一个例子，当在 LESS 文件中引入 CSS 注释时，就会引发 "Unrecognised input" 错误。
-- -------------------- ---- ------- -- ---- ---- ------- ----- -- --------- - ------ ------- - -- -- --- -- ---- ----
在上面的例子中，LESS 文件中包含了一个 CSS 注释块，虽然这个注释块本身是合法的，但由于 LESS 编译器无法识别这个块，因此会导致编译出错。如果这时你运行 LESS 编译器，就会看到如下的错误信息：
Unrecognised input
.css-file {
^
color: @color;如何解决 "Unrecognised input" 错误？
解决 "Unrecognised input" 错误的方法主要有两种：删除不合法的语句或字符，或者修改代码以使之符合 LESS 语法规则。
删除不合法的语句或字符
这种方法适用于代码中包含了不能被 LESS 识别的语句或字符。例如，在 LESS 文件中包含了不合法的 CSS 注释块，可以直接将其删除，使得 LESS 编译器能够正确识别代码。如果在 LESS 文件中包含了某些无法识别的字符，例如，特殊的 Unicode 字符或不可见字符，也可采用此方法。
修改代码以使之符合 LESS 语法规则
这种方法适用于代码本身符合 LESS 语法，但还是被 LESS 编译器不识别的情况。例如，在 LESS 文件中使用了不完整的 LESS 语法，例如，忘记了关闭一个括号或分号等，就会引发编译错误。此时，只需要修改代码，使其符合 LESS 语法规则即可。
例如，下面是一个 LESS 文件中包含了缺少分号的变量定义语句：
// Less file
@color: #fff
body {
background-color: @color;
}
// End of less file在上面的代码中，变量定义语句中缺少了分号，会导致 LESS 编译器无法正确解析代码，从而报错。如果你运行 LESS 编译器，就会看到如下的错误信息：
Unrecognised input
@color: #fff
^
body {为了解决这个编译错误，你只需要在变量定义语句末尾添加一个分号即可：
@color: #fff;
body {
background-color: @color;
}LESS 的基本语法和技巧
在 LESS 中，变量定义和嵌套规则是两个非常基本的语法特性。下面是一个例子，演示了如何在 LESS 中定义变量和使用嵌套规则：
-- -------------------- ---- -------
-- ---- ----
-------------- --------
---- -
----------------- ------
------ --------------
- -
------ --------------
---------------- -----
------- -
---------------- ----------
-
-
-
-- --- -- ---- ----在上面的例子中，我们定义了一个名为 @primaryColor 的变量，并使用它来指定一些样式。我们还嵌套了一个 a 元素的样式，使用了 & 符号来表示其父元素。在编译这个 LESS 文件时，LESS 编译器会自动展开嵌套规则，生成相应的 CSS 样式。
结论
通过本文你已经了解了什么是 "Unrecognised input" 错误，以及如何解决这一问题。同时我们还介绍了 LESS 的基本语法和技巧，希望对你日后的 LESS 编程有所帮助。LESS 提供了非常方便的方式来管理大型 CSS 代码库，使用 LESS 编译器能够让前端开发人员更加高效地管理和维护 CSS 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c6efd66ef9cf37fb11a9a