在 Sass 中使用 import 指令可以方便地引用其他 Sass 文件，但是不同的 import 指令有不同的优先级，可能会影响到样式的呈现。本文将详细介绍 Sass 中 import 指令的优先级以及如何合理使用该指令。
指令优先级
在 Sass 中，使用 import 指令引用其他 Sass 文件时，Sass 会根据一定的规则选择要引用的文件，这些规则如下：
- 以
_开头的文件不会被编译成单独的 CSS 文件，只能作为其他文件的依赖项被引用； - 在 import 指令中指定了文件的路径和扩展名时，Sass 会根据该路径和扩展名查找文件，如果有多个同名文件，会选择第一个符合条件的文件；
- 如果没有指定扩展名，Sass 会按照
.scss、.sass、.css的顺序依次查找文件，如果有多个同名文件，会选择第一个符合条件的文件； - 如果同一个文件被多个 Sass 文件引用，Sass 会将该文件编译成单独的 CSS 文件，在该文件被所有引用的 Sass 文件中共享。
根据上述规则，可以总结出 Sass 中 import 指令的优先级如下：
- 使用相对路径引用文件；
- 使用名称引用文件；
- 使用包含路径的名称引用文件；
- 引用相同的文件。
示例代码
下面给出一些示例代码，以帮助理解 import 指令的优先级：
示例 1
-- ------------- --------- ---- -- ---------- ------- ---------- ---- - ------ --------- -
在这个示例中，_utility.scss 文件以 _ 开头，Sass 不会将其编译成单独的 CSS 文件，只能作为其他文件的依赖项被引用。style.scss 通过 @import 'utility' 引用了 _utility.scss 文件，因此编译后的 CSS 文件中会包含 $utility: red;，并且 body { color: $utility; } 也会被编译成 body { color: red; }。
示例 2
-- ------------- --------- ---- -- ---------- ------- --------------- ---- - ------ --------- -
在这个示例中，_utility.scss 文件以 _ 开头，只能作为其他文件的依赖项被引用。style.scss 通过 @import 'utility.scss' 引用了 utility.scss 文件，Sass 会依次查找 utility.scss、utility.sass 和 utility.css 文件，并且选择第一个符合条件的文件，即 _utility.scss。因此编译后的 CSS 文件中会包含 $utility: red;，并且 body { color: $utility; } 也会被编译成 body { color: red; }。
示例 3
-- ---------- ------ ----- -- ------------- --------- ------ -- ---------- ------- ---------- ------- ------- ---- - ------ --------- -
在这个示例中，_base.scss 和 _utility.scss 都以 _ 开头，只能作为其他文件的依赖项被引用。style.scss 通过 @import 'utility' 和 @import 'base' 引用了 _utility.scss 和 _base.scss 文件，Sass 会将 _utility.scss 和 _base.scss 都编译成单独的 CSS 文件，在这些文件被引用的 Sass 文件中共享。因此编译后的 CSS 文件中会包含 $base: blue; 和 $utility: $base;，并且 body { color: $utility; } 会被编译成 body { color: blue; }。
总结
了解 Sass 中 import 指令的优先级可以帮助我们更加灵活地引用其他 Sass 文件，并且让样式的呈现更加可控。在使用 import 指令时，建议按照示例代码中的优先级顺序进行引用，以免出现意外的结果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653f616a7d4982a6eb8eddae