概述
在 CSS 中，我们可以使用 @import 规则来引入其他样式文件，SASS 也支持使用 @import 来进行样式的模块化开发。使用 SASS 进行样式开发，可以提升开发效率，使代码更具可维护性。本文将介绍在 SASS 中使用 @import 的规则与注意事项。
导入规则
在 SASS 中，可以通过 @import 导入 SCSS 文件，示例如下：
@import 'base.scss'; @import 'layout.scss';
在导入文件时，可以省略相同目录下的 _ 前缀和 .scss 后缀。因此，如果要导入的文件为 _variables.scss，可以写成下面的形式：
@import 'variables';
在导入文件时，可以指定导入的样式类型。如果导入的文件已经被 Sass 处理过了，可以使用 @import 'foo.css' 来指定导入的文件类型为 CSS。这使您可以将 CSS、Sass 和 SCSS 文件混合在一起导入。
注意事项
控制导入顺序
在样式文件中，样式的属性声明顺序通常是有一定约束的，例如使用圣杯布局时，需要先定义 container，再定义 inner 和 main，最后定义 left 和 right。在 SASS 中，我们可以使用 @import 来为每个样式文件指定导入的顺序。
示例如下：
@import 'mixins' /* 定义 mixin */ @import 'variables' /* 定义变量 */ @import 'base' /* 定义基础样式 */ @import 'layout' /* 定义布局 */ @import 'components' /* 定义组件样式 */ @import 'pages' /* 定义页面样式 */
避免循环依赖
在多个样式文件中导入相同的文件时，可能会导致循环依赖的情况。例如，样式文件 A 导入了样式文件 B，样式文件 B 又导入了样式文件 C，而样式文件 C 又导入了样式文件 A，就会出现循环依赖。
为了避免循环依赖的情况出现，可以将要导入的样式移到单独的文件中，然后在需要使用时再导入。
合理使用 @extend
在 Sass 中，可以使用 @extend 实现类的继承。但是，使用 @extend 也是需要注意的，应该遵循以下原则：
- 尽量避免使用
@extend，因为它可能导致代码膨胀和复杂性增加。 - 只在相关代码块之间使用
@extend，例如，在一个组件中使用@extend组件的基础样式。 - 不要在循环中使用
@extend。
示例如下：
-- -------------------- ---- ------- -- ---- ------ --- ---------- -- ---------- - ------- - ----- ---------- ------ - -- -------- ------ --- ------ -- ------ - ------- ----------- -------- - ----- -
总结
在 SASS 中，使用 @import 可以实现样式模块化的开发。使用 @import 时，应该注意导入顺序，避免循环依赖，合理使用 @extend。这些注意事项可以提高样式代码的可维护性与可读性，使代码开发更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644fd0af980a9b385b918d75