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