在前端开发中，CSS 是不可避免的一部分，使得代码看起来更加美观和可读。然而，CSS 也有其自身的限制，这就是为什么 CSS 预处理器作为一种解决方案成为了很多开发人员的首选。其中，SASS 是其中的一种，它不仅具有比普通 CSS 更多的功能，还提供了更加复杂的特性，如 @extend 和 @import，这两者看起来很相似，但实际上有着显著的区别。接下来我们来详细了解一下它们的不同之处以及如何选择使用。
@extend
@extend用于继承一个选择器的属性，这个选择器通常是预定义的，你可以在你的样式表中使用它，并在其他样式中通过 @extend 继承其属性。一个基本的例子如下：
-- -------------------- ---- ------- -- ---- ---- - ------- --- ----- ---- -------- ----- - -- ---- ---- - ------- ----- ----------------- ----- - -- ---- ---- - ------- ----- ------ ------ -
在上述的代码中，我们通过使用 @extend 来继承基类 .baz 的属性，这样我们就可以只写一遍 .baz 的属性，然后在其他选择器中通过 @extend 及类名来继承这些属性，从而减少了代码的重复。
@import
@import 用于将一个文件中的所有样式导入到另一个文件。和 @extend 不同的是，@import 不是用于继承属性，而是用于导入样式表文件。一个基本的例子如下：
-- -------------------- ---- ------- -- ---------- --------------- -------- ----------------- -------- -- ---------- ------- ------- ---------- - ----------------- --------------- ------ ----------------- -
在上述的代码中，我们定义了一个名为 _base.scss 的样式表文件，在该文件中定义了一些变量。接着我们又定义了一个名为 _home.scss 的样式表文件，在该文件中导入了 _base.scss 文件，并使用其中的变量。
区别
尽管 @extend 和 @import 都有相似的功能，但它们的实现方式完全不同。@extend 可以被用于继承选择器的属性，帮助我们减少代码的重复性，而 @import 只是简单地将一个样式表文件导入到另一个样式表文件中使用，根据需要在样式表中使用。这意味着，@extend 可以在一个选择器中继承其他选择器的属性，而 @import 只是将另一个样式表包含在当前样式表中。
结论
在选择是否使用 @import 和 @extend 时，需要根据具体的应用场景来确定。在某些情况下，你可能需要通过 @import 包含其他的样式表文件，以在需要时调用其中的类或者变量。在另一些情况下，你可能只想使用 @extend 来继承其他选择器的属性，以使代码更加简洁。在实际开发中，都需要注意到两者的使用方式和优缺点，经过权衡取舍做出最优选择。
最后，总结一下我们在这篇文章中所谈论的主题：SASS 中的 @import 和 @extend。这两种语法虽然看起来很相似，但在实践中有着非常不同的用途。理解这两个关键字的区别，可以使您编写更加简洁、高效和易于维护的代码。在实际应用中，我们应该谨慎使用，并选择最适合我们特定需求的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64571a1f968c7c53b09f0e3d