Sass 是一种强大的 CSS 预处理器，通过使用 Sass 可以提高 CSS 的可读性、可维护性和可重用性。然而，有时候使用 Sass 编写的样式文件在编译后却无法正常显示在页面上，给我们带来不便。本文将解决 Sass 编译后页面不显示的问题，并给出实用的解决方法。
问题描述
在开发过程中，我们通常会使用 Sass 编写样式文件，然后通过编译成 CSS 文件应用到页面上。但是，有时候我们发现编译后的 CSS 文件无法正常显示在页面上，经过排查发现没有错误提示，但是 Chrome 开发者工具中的样式文件并没有加载成功。
这是因为 Sass 特殊的语法和文件结构导致的，需要我们针对具体情况来进行分析和解决。
问题分析
Sass 的语法规则
Sass 提供了更加强大和灵活的 CSS 编写方式，比如变量、函数、嵌套、继承等。但是，当我们使用 Sass 编写样式文件时，我们需要编写 Sass 语法而非标准的 CSS 语法。例如：
$primary-color: #333;
body {
color: $primary-color;
}这段代码中，我们使用了 Sass 的变量和嵌套语法，但是这段代码并不能直接使用在标准的 CSS 文件中，需要先通过 Sass 编译器进行编译才能得到标准的 CSS 代码。
Sass 的文件结构
Sass 提供了两种文件结构：嵌套结构和扁平结构。嵌套结构允许我们使用嵌套语法，使得代码更加清晰易读；扁平结构允许我们按照功能模块划分样式，提高可维护性。例如：
嵌套结构：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
- -
------ -----
---------------- -----
-
-
-
-扁平结构：
-- -------------------- ---- ------- -- ----- ---- - ----------- ----------- - -- ------ ---------- - ------ ----- ---------- ------- ------- - ----- -------- - ----- - -- --------- ------------ - ----------- ------- -
这种文件结构和普通的 CSS 结构有区别，需要我们进行正确的编译才能得到正确的输出结果。
解决方法
问题一：Sass 的文件结构问题
通常情况下，Sass 文件的扁平结构相对稳定，会存在多个 Sass 文件，通过一个主文件来汇总所有的样式，而嵌套结构相对灵活，不是每个 Sass 文件都适用，很少用到嵌套结构的 mixin/extend 只是偶尔回头方便一下自己。
扁平结构的解决方法
- 确保每个文件仅包含具体的功能模块的样式，不出现全局样式的定义；
- 确认所有的变量和 mixin 在编译时已被导入到主编译文件（如下文添加的样式文件的问题）或者每个文件都声明了相应变量和 mixin。
如上所述，在调用时只需要确保所有的 Sass 文件都能被编译执行并最后生成一个 CSS 文件即可，可以在根目录下建立一个 scss 目录，并在该目录下编写所有的 Sass 文件，最后需要导入到主编译文件中。
例如，假设我们的项目有两个功能模块 header 和 content ，在 scss 目录下分别建立两个文件 _header.scss 和 _content.scss，再在主文件 main.scss 中导入：
// main.scss @import 'header'; @import 'content';
此时，我们使用 Sass 编译器将 main.scss 编译成标准的 CSS 文件即可。
嵌套结构的解决方法
嵌套结构会在深层嵌套时产生问题，可以使用以下三种方法对其进行解决：
方法一：使用标准 CSS 语法
如果你在编写 Sass 文件时并没有使用嵌套语法，只是简单地使用了变量、mixin 等 Sass 功能，则可以将 Sass 文件中所有的 Sass 语法都替换成标准的 CSS 语法。
方法二：减小嵌套层次
减小嵌套层次会让编译器工作得更加轻松，减少产生错误的可能性。在实际编写 Sass 代码时，我们应该尽量避免过多的嵌套，保持代码的清晰简洁。
方法三：编写更加健壮的编译器
Sass 编译器的错误处理机制可能不够健壮，我们可以使用其他编译器或者更加健壮的 Sass 插件来解决问题。比如，Dart Sass 和 node-sass 都是 Sass 的编译器，其错误处理机制更加严谨和健壮。
问题二：Sass 的语法规则问题
缺少文件
有时候，我们的 Sass 文件并没有被正确地导入到主文件中，这时候在 Chrome 开发者工具中可以看到如下图所示的错误提示：
此时，我们需要检查主文件中是否已经导入了相应的 Sass 文件，或者检查路径等是否正确。
Sass 变量的作用域问题
Sass 变量也可能会导致编译后样式文件未被加载的问题，这是因为 Sass 变量的作用域只在定义它们的规则块内部有效。如果我们在不同的规则块中定义了同名的变量，则会出现冲突，导致编译后的样式文件无法正常加载。
例如：
-- -------------------- ---- ------- -- --------------- --------------- ----- -- ----------- ---- - ------ --------------- - ------- - ------ --------------- -
在上面的例子中，$primary-color 变量在 _variables.scss 文件中被定义，但是在 body 和 .header 两个选择器块中都被使用了。由于 Sass 变量的作用域问题，当我们将它们编译成 CSS 文件时，会出现如下的 CSS 代码：
body {
color: #333;
}但是 .header 选择器块中的样式却没有被编译，因为在编译中 Sass 常量的范围不是全局，因此 .header 无法获取 $primary-color 的值。因此，我们需要在每个需要用到 $primary-color 的规则块中都定义一遍该变量，例如：
-- -------------------- ---- ------- -- ----------- ---- - --------------- ----- ------ --------------- - ------- - --------------- ----- ------ --------------- -
这样，编译后的样式文件就可以正常加载。
总结
本文讲述了 Sass 编译后页面不显示的问题解决方法，通过对 Sass 的语法规则、文件结构等方面的分析，归纳出引起问题的原因，并给出了实用的解决方法。通过对 Sass 的正确使用，可以减少出现问题的可能性，提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a15dd968c7c53b05f2232