在使用 SASS 编写样式时，我们通常会使用 @import 指令来引入其他文件中定义的变量、混合宏等等。但是，即使是这样一下子简单明了的指令，在实际使用中也会出现很多错误和坑点，特别是对新手来说。
本文将列举一些常见的在使用 @import 时容易踩到的坑，并给出一些解决方法和注意事项。
坑点一：路径不对
在使用 @import 的时候，很多人容易写错文件路径。特别是在嵌套文件夹中使用 @import 时，路径就更容易被搞错。
下面是一个示例代码：
// file1.scss @import "file2.scss"; // folder1/file2.scss @import "../file3.scss"; // folder1/file3.scss $color: red;
在这个示例中，如果我们要在 file1.scss 中导入 file2.scss，那么就需要根据当前文件所在的目录去找到 file2.scss。import 指令的路径参数是相对于当前文件的，因此在 file1.scss 中使用 @import "folder1/file2.scss"; 或 @import "./folder1/file2.scss"; 都是会导致路径错误的。
正确的写法应该是 @import "file2.scss";，这样 SASS 就会在 file1.scss 所在的目录中找到 file2.scss；而在 file2.scss 中使用 @import "../file3.scss"; 也是正确的，因为此时路径是相对于 file2.scss。
如果你对文件路径不是很熟悉，建议使用绝对路径来引入文件，方法是将路径参数写成以 / 开头的形式：
@import "/folder1/file2.scss";
这个路径就是相对于网站根目录的，建议在多个目录下使用相同的 CSS 预编译器的情况下使用。
坑点二：过度使用 @import
使用 @import 引入外部文件的确很方便，但是如果过度使用，就会导致 CSS 文件过多、加载时间延长等问题。
实践中，我们最好把样式文件分成主文件和子文件两部分：主文件包含网站中所有的变量、混合宏和公共样式，而子文件则包含特定页面或模块的样式。这样做不但可以减少文件数量，还可以更好地组织和维护代码。
示例代码如下：
-- -------------------- ---- ------- -- ---------------- ------- ----------------- ------- -------------- ------- ------------- ------- ------------ -- -------------- ------- --------------- ------- ------------展开代码
这样通过 import 引入的都是子文件，样式数目也得到了很好的控制。
坑点三：循环引用
@import 也可能导致循环引用的问题。
在实际使用中，可能出现这种情况：file1.scss 中使用了 file2.scss 定义的变量，而 file2.scss 又在其中同样使用了 file1.scss 中定义的变量，这就会形成一个循环引用的问题。
解决方法也很简单，只需要在其中一个文件中移除其中引用就可以了。如果不能拿捏好，建议在代码层面上极度简洁。
示例代码：
-- -------------------- ---- ------- -- ---------- ------- ---- ------- ------------- -- -- ---------- ------ ------ - ------ ------- - -- ---------- -- ------- ------------- -- ------------ ------ ----- ----- - ---------- ------ -展开代码
在这份代码中，file2.scss 会尝试引用 file1.scss 中定义的变量 $color，但是 file1.scss 中也引用了 file2.scss，这就导致了循环引用的问题。因此，我们需要在 file2.scss 中注释掉那行语句。
坑点四：文件格式不对
最后，还有一个小坑点：在导入 CSS 文件时，如果该文件不是用 SASS 编写的，会导致编译错误。在 SASS 中，只支持 .scss 和 .sass 两种文件格式，因此要使用 CSS 文件时需要将其重命名为 .scss 或 .sass 格式，或者使用额外的转换工具来将其转换为 .scss 或 .sass 格式。
结语
以上就是在使用 SASS 中容易踩到的一些坑，当然还有一些注意事项需要提醒：
- 优先使用绝对路径来导入文件，这样会更稳定。
- 把所有的变量和混合宏放在主文件中，而将页面或模块特定的样式拆分到子文件中。
- 避免出现循环引用的问题，这可能导致编译错误。
- 注意文件格式，只支持 .scss 和 .sass 两种格式。
如有不当之处，还请指出，让我们共同进步。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c4bdc96e1fc40e36dc49cc
