Sass 中 import 的指令优先级

在 Sass 中使用 import 指令可以方便地引用其他 Sass 文件，但是不同的 import 指令有不同的优先级，可能会影响到样式的呈现。本文将详细介绍 Sass 中 import 指令的优先级以及如何合理使用该指令。

指令优先级

在 Sass 中，使用 import 指令引用其他 Sass 文件时，Sass 会根据一定的规则选择要引用的文件，这些规则如下：

1. 以 _ 开头的文件不会被编译成单独的 CSS 文件，只能作为其他文件的依赖项被引用；
2. 在 import 指令中指定了文件的路径和扩展名时，Sass 会根据该路径和扩展名查找文件，如果有多个同名文件，会选择第一个符合条件的文件；
3. 如果没有指定扩展名，Sass 会按照 .scss、.sass、.css 的顺序依次查找文件，如果有多个同名文件，会选择第一个符合条件的文件；
4. 如果同一个文件被多个 Sass 文件引用，Sass 会将该文件编译成单独的 CSS 文件，在该文件被所有引用的 Sass 文件中共享。

根据上述规则，可以总结出 Sass 中 import 指令的优先级如下：

1. 使用相对路径引用文件；
2. 使用名称引用文件；
3. 使用包含路径的名称引用文件；
4. 引用相同的文件。

示例代码

下面给出一些示例代码，以帮助理解 import 指令的优先级：

示例 1

// _utility.scss
$utility: red;

// style.scss
@import 'utility';
body { color: $utility; }

在这个示例中，_utility.scss 文件以 _ 开头，Sass 不会将其编译成单独的 CSS 文件，只能作为其他文件的依赖项被引用。style.scss 通过 @import 'utility' 引用了 _utility.scss 文件，因此编译后的 CSS 文件中会包含 $utility: red;，并且 body { color: $utility; } 也会被编译成 body { color: red; }。

示例 2

// _utility.scss
$utility: red;

// style.scss
@import 'utility.scss';
body { color: $utility; }

在这个示例中，_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

// javascriptcn.com 代码示例
// _base.scss
$base: blue;

// _utility.scss
$utility: $base;

// style.scss
@import 'utility';
@import 'base';
body { color: $utility; }

在这个示例中，_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