SASS 中继承与 Mixin 的结合使用技巧
SASS 是一个强大的 CSS 预处理器，它提供了一些令人惊叹的功能来简化 CSS 的编写，其中包括继承和 Mixin。在这篇文章中，我们将深入探讨 SASS 中继承和 Mixin 的结合使用技巧，并提供一些示例代码来说明。
什么是继承？
继承是 SASS 中的一个强大功能，它允许你继承一个选择器的样式，而不用复制和粘贴相同的 CSS 样式。通过使用 @extend 指令，您可以创建一个基本的样式规则集合，然后对其进行扩展。
例如，创建一个名为 base 的常规类，并使其继承基础样式规则集合。
----- -
------------ ------ -----------
---------- -----
------ -----
-注意：当使用继承时，请确保您没有使用禁用的样式规则（例如，a 标签上被禁用的 color）。
为了扩展 base 类，我们可以使用 @extend 指令，并添加额外的样式规则。
-------- -
------- ------
----------------- -----
------ -----
-这将继承 .base 的所有样式，并将特殊类的背景颜色更改为红色，字体颜色更改为白色。
注意：如果多个选择器使用继承相同的样式规则，那么在最终的 CSS 中将只包含一份。这意味着您可以通过减少 CSS 的重复来提高性能。
继承的一个常见问题是它不能继承一个选择器的伪类或伪元素。为了解决这个问题，您可以使用 %placeholder 占位符选择器。
-------------- -
-------------- ----
-
------- -
------- ---------------
-
------------- -
----------------- -----
-在此示例中，我们创建了一个 %vendor-button 占位符选择器，它规定了共享的基本样式规则集合。通过将 .button 类与 %vendor-button 占位符继承，.button 类共享了所有 %vendor-button 占位符选择器中定义的样式规则集合。当按钮被悬停时，我们可以添加 background-color 样式，并使用 :hover 伪类来定义这个行为。
什么是 Mixin？
Mixin 允许您定义一组样式规则，并在需要时将其应用到一个选择器上。通过使用 @mixin 指令，您可以创建一个函数式的 CSS 规则并传递参数。
例如，创建一个名为 padding 的 mixin，它接受两个参数: $top 和 $bottom。
------ ------------- -------- -
------------ -----
--------------- --------
-现在我们可以将这个 mixin 应用到任何选择器上。
---- -
----------------- -----
-------- ------------- ------
-这将应用 mixin 的样式规则到 .box 类中，包括我们传递的 $top 和 $bottom 值。
注意：Mixin 可以被定义在任何地方，并可以按需要调用。在 SASS 中，最佳实践是在样式表中定义小型的函数式样式规则，以便在需要时复用。
Mixin 也可以接受默认参数或可变参数列表，这些参数可以用来定义多个选择器或元素的样式。
例如，创建一个名为 text-ellipsis 的 mixin，它为 text-overflow 和 white-space 属性定义了一组样式规则，并接受一个默认的 $line 参数。
------ -------------------- -- -
-------------- ---------
------------ -------
--------- -------
-------- ------------
------------------- ------
------------------- ---------
-现在，我们可以将这个 mixin 应用到选择器中。
------------- -
-------- ----------------
-
------------- -
-------- -----------------
-这将应用 .ellipsis-one 和 .ellipsis-two 的样式规则，其中两个选择器都控制 text-overflow 属性和 white-space 属性。由于我们使用了默认值为 1 的 $line 形参，因此 .ellipsis-one 类将只处理一行文本。与此同时，.ellipsis-two 类将处理两行文本。
Mixin 的结合使用技巧
虽然继承和 Mixin 在 SASS 中分别具有其各自的优势，但它们的结合使用提供了很多有意思的技巧。
首先，您可以定义一个基类或 mixin，然后使用 @include 指令来调用它，然后使用 @extend 指令对它进行扩展。
------ ----------- -
-------------- ----
-------- ---- -----
-
------- -
-------- ------------
-
--------------- -
------- --------
----------------- -----
------ -----
-在此示例中，我们定义了一个名为 button-base 的 mixin，并使用 @include 指令将其应用到 .button 类中。接下来，我们使用 @extend 指令将 .special-button 类扩展到 .button 类上，并更改了特殊按钮的背景颜色和字体颜色样式。
其次，您可以创建 mixin 与 %placeholder 占位符选择器结合使用，以更好地支持伪类/伪元素。在这方面，%placeholder 占位符选择器与 Mixin 结合的结果通常比使用 @extend 和类选择器更佳。
------------ -
-------- -------------
-------- ---- -----
------- --- ----- -----
-
------ ------ -
------- -------------
------ -----
----------------- -----
-
------- -
-------- -------
-
------------- -
----------------- -----
-在这个示例中，我们创建了一个 %button-base 的占位符选择器，并使用 @extend 指令将其应用到 @mixin button 中。通过将 .button 类与 @include button 混入在一起，我们可以动态添加样式，包括文字颜色和背景颜色。最后，我们使用 :hover 伪类来定义背景颜色变成黑色时的行为。
最后，您可以在 mixin 的参数中使用继承和 @extend 指令的混合。这在您正在定义多个样式规则集合时非常有用，这些规则集合具有相同的基本样式，但与传递给 mixin 的参数有所不同。
------ ----------- -
-------- -------------
-------- ---- -----
-
------------- -
------ ------
-
-------------- -
------- -----
-
------ -------------- -------- -
-------- ------------
------- --------------
------- ---------------
------ -------
------- --------
-
---------------- -
-------- ------------ ------
-在上面的示例中，我们首先定义了一个基本的 button-base mixin，其中定义了 display 和 padding 样式规则集合。接下来，我们创建了两个占位符选择器，%button-width 和 %button-height，它们各自定义了 width 和 height 样式规则集合。
最后，我们定义了一个名为 button 的 mixin，该 mixin 接受两个参数，$width 和 $height，在传递这些参数时，它将继承 %button-width 和 %button-height，以及应用 width 和 height 的样式规则。最终，我们将 .standard-button 类与 button mixin 混合，传递 50px 和 30px 作为 $width 和 $height 的参数值。
结论
SASS 的继承和 Mixin 功能是非常强大的，它们可以让您更轻松地编写 CSS 样式规则，并在整个项目中实现更好的样式重用。通过与 %placeholder 占位符选择器和 mixin 的混合使用，您可以更好地支持伪类和伪元素，并支持传递参数和默认值，这些功能在大型和长期项目中特别有用。如果您之前尚未使用 SASS 的这些功能，那么现在是时候开始探索它们了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670e2f545f551281025ffc01