SASS 是一种流行的 CSS 预处理器，它提供了许多功能和语言特性，以帮助我们更快速、更高效地编写 CSS。在 SASS 中，有两个常用的指令，它们分别是 @import 和 @extend。虽然它们的作用都是用来组织和重用样式代码，但是它们在细节上却有很大的区别。本文将详细介绍这两个指令的区别和注意事项，并提供示例代码作为参考。
@import
在 SASS 中，@import 用来导入一个 SCSS 或 CSS 文件。它的语法如下：
@import 'filename';
其中，filename 是要导入的文件名，可以使用相对路径或绝对路径，也可以省略文件扩展名。比如：
@import 'base'; // 导入 base.scss 或 base.css @import 'partials/navbar'; // 导入 partials/_navbar.scss 或 partials/_navbar.css @import '~/node_modules/bootstrap/scss/bootstrap'; // 导入 node_modules/bootstrap/scss/_bootstrap.scss
@import 的优点是可以将样式代码拆分成多个文件，让代码更具可读性和可维护性。此外，可以使用 @import 来引入第三方库或框架的 SCSS 文件，而无需手动下载和管理它们。但是，@import 也有一些缺点：
- @import 的实现方式是通过将导入的文件复制并粘贴到当前文件中。这样会导致样式表文件变得更大，而且会增加执行时间。
- @import 的顺序会影响渲染层叠样式表的顺序。如果在不同的文件中多次导入同一个文件，就可能会出现样式被覆盖或不生效的情况。
因此，要正确使用 @import，请注意以下几点：
- 将 @import 放在文件的开头，以避免顺序问题。
- 尽量减少 @import 的数量和层级，以提高性能。
- 如果需要引入第三方库或框架的样式，建议使用 Webpack 的 loader 或插件来进行处理，而不是直接使用 @import。
@extend
在 SASS 中，@extend 用来继承一个选择器的样式规则，并将它应用于当前选择器。它的语法如下：
.selector {
// 样式规则
}
.new-selector {
@extend .selector;
// 其他样式规则
}其中，.selector 是要继承的选择器，而 .new-selector 则是用来重用 .selector 的样式规则的选择器。在编译后，.new-selector 将具有 .selector 中定义的样式规则，而且两个选择器将被合并为一个选择器。
@extend 的优点是可以实现样式规则的重用，而无需将它们复制粘贴到不同的选择器中。此外，@extend 还可以让样式表代码更加简洁，减少了代码量。但是，@extend 也有一些缺点：
- @extend 的使用不当会导致无效的或冗余的样式规则。如果继承的选择器包含多个样式规则，而当前选择器只需要继承其中一部分规则，就会产生无效的规则。
- 如果在多个选择器中使用 @extend 来重用同一份样式规则，就会使这些选择器变得不可预测。因为修改一个选择器的样式规则，就可能会影响到其他选择器中继承的规则。
因此，要正确使用 @extend，请注意以下几点：
- 不要在复杂的选择器上使用 @extend。选择器应该尽量简洁，以便我们更容易维护和修改。
- 在使用 @extend 时，应该仅继承必要的样式规则，而不是一整个选择器的所有规则。
- 尽量避免在多个选择器中重用同一份样式规则。
示例代码
为了更好地理解 @import 和 @extend 的使用方法和注意事项，下面给出一些示例代码：
示例 1：@import
-- -------------------- ---- ------- -- --------- --------------- -------- ---------- -------- ---- - ----------------- ---------- ------ --------------- - -- --------- ------- ------- ------- - ----------------- ----------------------- ----- -
在上面的示例中，我们将基础的样式规则放在 base.scss 中，并在 main.scss 中通过 @import 引入。这样可以让代码更具可读性和可维护性，而且不需要在 main.scss 中重复定义颜色变量。
示例 2：@extend
-- -------------------- ---- ------- -- --------- ---- - -------- ---- ----- -------------- ---- ------- ----- ------------ ----- - ------------ - ------- ----- ----------------- -------- ------ -------- - -------------- - ------- ----- ----------------- -------- ------ -------- - -- --------- ----------- - ------- ------------- ----------- ----- -
在上面的示例中，我们定义了一个 .btn 选择器来包含按钮的常用样式规则，而 .btn-primary 和 .btn-secondary 则继承了 .btn，并在此基础上添加了不同的背景颜色和文本颜色。然后，我们在 main.scss 中通过 @extend 来重用了 .btn-primary 的样式规则，并在此基础上添加了一个 margin-top 属性。这样可以让提交按钮继承 .btn-primary 的样式，并且可以减少代码量。
总结
@import 用来导入样式文件，使代码更具可读性和可维护性，但应注意减少层级和避免顺序问题；@extend 用来重用样式规则，使代码更加简洁，但使用不当可能会导致无效的或冗余的样式规则。在实际项目中，要根据实际情况选择合适的指令，并注意使用方法和注意事项，以提高代码质量和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648b20b748841e989497f07b