Sass 中 @extend 与 @import 解决方案
Sass 是一种 CSS 预处理器，它引入了许多对编写 CSS 更有用的功能，从复用代码到逻辑运算等。当涉及到大型项目时，Sass 的 @extend 和 @import 这两个功能非常重要。这两个功能可以用来管理和组织样式表，并更有效地重用样式。
@extend
@extend 可以将一个选择器的样式继承到另一个选择器中，并且可以多重继承。这允许样式表更具语义性和重用性，可以减少样式表的大小和复杂度。@extend 可以作为 mixin 使用，并允许动态更改属性值，类似于变量。
示例代码：
-- -------------------- ---- ------- ------------- - -------- ----- ------- --- ----- ----- ----------------- ----- ---------- ----- - ------------ - ------- -------------- ------ ------ - ------------ - ------- -------------- ------ ------ -
在上面的示例中，%input-styles 定义了一组样式，它被 input-small 和 input-large 选择器继承。两者都继承相同的样式，但其宽度不同。这避免了重复代码，并通过选择器的语义性提高了代码的可读性。如果要更改所有输入框的样式，只需更改 %input-styles。
继承父元素的选择器可以使用 & 符号。示例代码：
-- -------------------- ---- -------
------- -
------- --- ----- -----
----------------- -----
---------- -----
-------- -----
- - ------- -
------------ -----
-
-在上面的示例中，使用 & 符号引用了 button 的父级选择器，使用 + 符号选中紧接在按钮之后的选择器。这使我们可以很容易地对按钮应用良好的间距。
@import
@import 允许将一个 Sass 文件导入到另一个 Sass 文件中，这可以帮助我们组织样式表并降低代码的复杂度。一个主样式表可以包含其他 Sass 文件，这些文件可以针对特定的组件或特定的页面编写。
示例代码：
-- -------------------- ---- -------
-- ---------
------- ------------
------- --------
------- ---------
------- --------------------
------- -------------------
------- -------------
-- --------------
--------------- --------
----------------- --------
-- ----------
---- -
---------- -----
-
---- -
------- --
-
-- -----------
------ ------------- -
------ ----------- ------- -
---------
-
-
-- -----------------
------- -
-------- -----
------- --- ----- ---------------
----------------- ---------------
------ -----
------- -
----------------- -----------------
------------- -----------------
-
-
-- ----------------
------ -
-------- -----
------- --- ----- -----
----------------- -----
---------- -----
------- -
-------- -----
------------- ---------------
-
-
-- ----------
----- -
------- -
------- -----
-
------ -
------- -----
-
-在上面的例子中，主样式表 main.scss 包含其他所有 Sass 文件。variables.scss 定义变量，reset.scss 重置默认样式，mixins.scss 定义了媒体查询的 mixin。button.scss 和 input.scss 定义了所有按钮和输入字段的样式。home.scss 定义了特定页面的样式。这种方式可以让我们更好地组织我们的样式代码，使其更容易维护。
总结
Sass 中 @extend 和 @import 是组织大型项目样式的强大工具。@extend 允许我们继承其他样式选择器的特定样式，从而缩短代码长度并提高可读性。@import 允许我们将 Sass 文件划分为更小的组件并组织代码，从而使我们的样式表更加可维护。这些功能可以显著提高我们的编写样式表的效率，因此在大型项目中大量使用它们是必不可少的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475e157968c7c53b02e2e1a