SASS 中的 @mixin 与 @extend 使用场景及注意事项（附例子）
SASS 是一种 CSS 预处理器，能够提供更多的灵活性和可重用性，其中 @mixin 和 @extend 是 SASS 中使用最广泛的两个功能之一。
@mixin 功能
@mixin 可以将一个或多个 CSS 属性定义为一个 mixin，然后将此 mixin 作为代码库中的任何样式规则的一部分重复使用。
例如，你可以使用 @mixin 来定义页面上常见的按钮样式，还可以修改不同按钮的背景色，文字大小等参数：
-- -------------------- ---- -------
------ ------------------- ------- ----------- -
-------- -------------
-------------- ----
-------- ---- -----
----------- ------------
------ -------
---------- -----------
------- -
----------- ------------------- -----
-
-
--------------- -
-------- --------------- ------ ------
-
----------------- -
-------- ------------ ------ ------
-在上面的例子中，@mixin 用于定义按钮的基本样式，设置传递给它的颜色和文字大小。通过 @include，可以使用上述 @mixin 来包含按钮在不同场景下使用的各种样式。
@extend 功能
@extend 可以让一个选择器（类，id，元素等）“借用”另一个选择器的样式，从而无需重复编写代码。
例如，当一个元素需要继承另一个类的样式时，可以使用 @extend，如下所示：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ----- -------------- ---- ----------- ----- ------ ------ - ------------ - ------- ----- ----------- ----- - -------------- - ------- ----- ----------- ------ -
在上面的例子中，.btn-primary 和 .btn-secondary 两个类可以“借用” .btn 的样式，从而避免了重复编写相同的代码。
使用注意事项
尽管 @mixin 和 @extend 在 SASS 中非常方便，但同时也有一些需要注意的事项：
- 不要过度使用
如果你在大量使用 @mixin 和 @extend 的情况下编写 CSS，很有可能会在编译时出现一些问题。因此，在使用这两个功能时，要确保代码可读性，并避免过于复杂的嵌套。
- 避免与其它选择器重复
当使用 @extend 时，要确保没有选择器与继承的选择器重复，否则可能会产生意外的问题。
- 使用 @extend 时注意顺序
当使用 @extend 时，确保父选择器在子选择器之前定义，这样可以避免不必要的代码重新排列。
结论
SASS 中的 @mixin 和 @extend 是很有用的工具，可以让你的代码更灵活和可重用，从而提高代码质量和开发效率。但同时也要记住使用时的注意事项，以免出现编译错误和未知问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6707e8b7d91dce0dc86d3654