前言
SASS 是一种基于 CSS 的预处理器，提供了更多的功能和扩展语言，帮助开发人员更高效地编写样式代码。本文将介绍如何使用 SASS 中的 @import 和 @extend 属性，从而提高 CSS 代码的可重用性和维护性。
@import
@import 属性允许我们将一个 SASS 文件导入到另一个 SASS 文件中。通过这种方式，我们可以分离样式文件，使代码更加有组织性和可管理性。同时，这也能提高构建速度，因为每个导入进来的 SASS 文件都会独立编译。
示例
我们可以创建一个 _base.scss 文件，其中包含了一些基本的样式：
-- -------------------- ---- ------- ----------- ----- --------------- -------- ---- - ---------- ----------- - - - ------ --------------- -
然后，我们在另一个文件中通过 @import 导入这个文件：
@import 'base';
.container {
max-width: 1024px;
margin: 0 auto;
}这样，我们可以在样式表中使用 .container 类，同时免去了在每个文件中都引入这些基础样式的麻烦。
我们也可以使用 @import 来导入一个目录，这将导入目录下所有的 SASS 文件。例如，我们可以将所有的样式文件放在一个 styles/ 目录下，并在主文件中以如下方式导入：
@import 'styles/*';
这将导入 styles/ 目录下所有的 SASS 文件。
@extend
@extend 属性允许我们通过一个选择器扩展另一个选择器的样式。这种方式使代码更加高效和可重用。
示例
我们可以创建一个 .btn 类，表示一个基础的按钮样式：
-- -------------------- ---- -------
---- -
-------- -------------
-------- --- -----
---------- -----
----------- -------
----------------- --------
-------------- ----
------ -----
---------------- -----
------- -
----------------- --------
-
-然后，我们可以通过 @extend 扩展这个类：
.btn-primary {
@extend .btn;
}
.btn-secondary {
@extend .btn;
background-color: #6c757d;
}这样，我们就可以通过 .btn-primary 和 .btn-secondary 类，得到基础按钮样式并且可以自定义颜色。
此外，我们也可以使用 @extend 去扩展其他文件中的类。例如，我们可以在 _base.scss 文件中定义一个 .box 类：
.box {
padding: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}然后，我们在另一个文件中扩展这个类：
.card {
@extend .box;
background-color: #f8f9fa;
}这样，我们就可以直接使用 .card 类，并且得到了 .box 类的所有样式。
总结
使用 SASS 中的 @import 和 @extend 属性可以提高 CSS 代码的可重用性和维护性。@import 可以帮助我们分离样式文件，使代码更有组织性；@extend 则可以让我们通过一个选择器扩展另一个选择器的样式，这样可以使代码更高效和可重用。同时，这两个属性也能提高代码的构建速度，因为每个导入进来的 SASS 文件都会独立编译。
最后，我们需要注意的是，在使用 @extend 属性时，要确保正确的层级关系，避免出现不必要的样式重载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a6eeb95b1f8cacd25e555