在使用 Sass 进行 CSS 预处理的过程中，我们可能会遇到 “Unrecognized input”（无法识别的输入）这个错误。在本文中，我们将深入探讨这个错误的原因，并给出解决方法。
什么是 “Unrecognized input”？
在 Sass 文件中，如果存在无法被 Sass 识别的输入，就会发生 “Unrecognized input” 错误。
以下是一个示例 test.scss 文件：
-- -------------------- ---- ------- --------------- -------- ---- - ---------- ----- ------ --------------- - ----- - -------- ----- -- ---- -- -- ---------------- ------- ------------ ------- -
如果在执行 sass test.scss 命令时，出现以下错误信息：
Error: Invalid CSS after ".flex": expected selector or at-rule, was "{"
on line 8 of test.scss
>> .flex {
----^那么就意味着 Sass 无法识别代码中的 .flex { ... }。
错误原因
造成 “Unrecognized input” 错误的原因通常有以下几种：
- 缺少分号
在 Sass 文件中，每个属性之间都需要使用分号进行分隔。如果一个属性没有加分号，那么 Sass 就无法正确解析代码了。
例如：
$primary-color: #00a0e9;
body {
color: $primary-color /* 缺少分号 */
}这种情况下，会提示 “Unrecognized input” 错误。
- 大括号未闭合
在 Sass 文件中，每个规则集都需要使用大括号进行包围。如果某个规则集的大括号未闭合，那么 Sass 就无法正确解析代码。
例如：
-- -------------------- ---- ------- --------------- -------- ---- - ------ --------------- - ----- - -------- ----- -- ----- -- ---------------- ------- ------------ -------
这种情况下，会提示 “Unrecognized input” 错误。
- 存在不被 Sass 支持的写法
Sass 支持的语法和 CSS 并不完全一致。如果在 Sass 文件中使用了 CSS 不支持的写法，那么就会提示 “Unrecognized input” 错误。
例如：
-- -------------------- ---- -------
--------------- --------
---- -
---------- -----
------------ -
------ ---------------
-
-这种情况下，会提示 “Unrecognized input” 错误。
- 引用了不存在的变量
在 Sass 中，如果引用了不存在的变量，就会提示 “Undefined variable”（未定义的变量）错误。但是，有时候也会出现 “Unrecognized input” 错误。这是因为 Sass 在解析变量时遇到了错误，导致后面的代码无法正常解析。
例如：
body {
color: $primary-color;
}
p {
color: $secondary-color; /* 未定义的变量 */
}这种情况下，会提示 “Unrecognized input” 错误。
解决方法
针对以上几种原因，我们可以分别采用以下的方法来解决 “Unrecognized input” 错误：
- 缺少分号
在 Sass 文件中添加分号即可。在本例中，应该将最后一行代码改为 color: $primary-color;。
- 大括号未闭合
在 Sass 文件中添加相应的右括号即可。在本例中，应该在第 8 行后添加 }。
- 存在不被 Sass 支持的写法
将不被 Sass 支持的写法转换为 Sass 的写法即可。在本例中，应该将代码改为：
-- -------------------- ---- -------
--------------- --------
---- -
---------- -----
------------ -
------ ---------------
-
-- 引用了不存在的变量
将不存在的变量替换为正确的变量即可。在本例中，应该添加 $secondary-color 变量的定义，或者将 color: $secondary-color; 移动到 $primary-color 之前。
总结
“Unrecognized input” 错误可能是由多种原因引起的，比如缺少分号、大括号不闭合、使用了不支持的 CSS 语法等等。通过了解每种错误的原因和解决方法，我们可以更轻松地使用 Sass 进行 CSS 预处理工作，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d34b4db5eee0b525adb53b