SASS 的 @import 规则应该怎么使用？
在前端开发中，SASS 经常被用来处理 CSS 的样式表。而在 SASS 中，@import 是一项十分重要的规则，它可以用来引入其他的 SASS 文件，使得我们可以更好地组织和管理我们的样式表。但是，在使用 @import 的时候，我们也需要遵循一些规则，下面我们来详细了解一下。
- 文件引入顺序
当我们使用 @import 引入多个文件时，这些文件的引入顺序非常重要。因为 SASS 编译器会按照文件引入的先后顺序将这些文件合并成一个大文件，而样式表中的样式规则是按照出现的先后顺序进行解析的。如果我们引入的文件中有相同的样式规则，那么后面引入的文件中的规则会覆盖先前引入的文件中的规则。
因此，我们需要遵循以下原则：
- 引入变量和函数的文件应该放在引入其他文件的前面，因为这些文件可能被用到后面引入的文件中。
- 引入的顺序应该从通用到特定。也就是说，通用样式的文件应该放在前面，特定样式的文件应该放在后面。这样可以避免后面样式的覆盖。
- 不要重复引入文件
假设我们有两个文件 a.scss 和 b.scss，它们分别定义了同一个变量 $theme-color。如果我们在另外的文件里先后引入了 a.scss 和 b.scss，那么 $theme-color 就会被定义两次，编译时会产生错误。
为了避免这种情况，我们需要在某个文件中定义公共的变量和函数，然后在需要用到这些变量和函数的文件中通过 @import 引入。这样可以避免定义重复的变量和函数。
- 避免使用扩展名
在 SASS 中，我们可以使用 @import 引入其他的 SASS 文件，而这些文件的扩展名可以省略。这是因为 SASS 编译器会默认查找同名的 .scss 文件，如果找不到，就会自动添加 .scss 扩展名。
但是，如果我们在引入文件时明确指定了扩展名，那么编译器就不会自动添加扩展名了。这样可能会导致错误的发生，需要我们手动检查文件路径和扩展名。
- 引入路径的写法
在使用 @import 引入文件时，我们需要注意文件路径的写法。如果文件在同一目录下，我们可以直接写文件名。如果文件在其他目录下，我们需要写出完整的路径。
为了写出路径，我们可以使用相对路径或绝对路径。相对路径表示相对于当前文件所在的目录的路径，而绝对路径则是从文件系统的根目录开始的路径。
示例代码：
假设我们有以下目录结构：
- css/ - utils.scss - mixin.scss - sass/ - main.scss
现在我们要在 main.scss 中引入 utils.scss 和 mixin.scss。
从同一目录下引入 utils.scss：
@import 'utils';
从其他目录引入 mixin.scss：
@import 'css/mixin';
使用相对路径引入 utils.scss：
@import '../css/utils';
使用绝对路径引入 mixin.scss：
@import '/Users/username/project/css/mixin';
总结：
在使用 SASS 的 @import 规则时，我们需要遵循文件引入顺序、不要重复引入文件、避免使用扩展名以及正确书写引入路径的原则。这些原则可以帮助我们更好地组织和管理样式表，避免错误的发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2302b48841e9894e7ad6c