SASS mixin 和 % placeholders：你该如何选择？
SASS 是一种 CSS 预处理器，它允许你使用变量、嵌套语法、循环、函数等特性来简化 CSS 的编写。在 SASS 中，mixin 和 % placeholders 都是常用的语法。
Mixin 是一种函数式的语法，它允许在不同的选择器中引用相同的代码块。Placeholder 则是一种占位符，它只能在选择器中被继承。
那么，当我们需要封装一些常用的 CSS 样式时，我们应该选择使用 mixin 还是 placeholder 呢？下面我将为你详细分析两者的特点，并给出一些应用示例。
Mixin 的特点
Mixin 具有函数的特点，它可以接收参数，并且可以在不同的选择器中重复调用。Mixin 可以减少代码中的重复，提高了开发效率。下面是一个简单的 mixin 示例：
-- -------------------- ---- ------- ------ ---------------------- ------- ------------- ------- - -------- ----- ---------------- ----------------- ------------ ------------- - ---------- - -------- ------- - ---- - -------- ---------------------- --------------- -
在上面的例子中，我们定义了一个名为 flex 的 mixin，它接收两个参数：$justify-content 和 $align-items。我们还定义了两个选择器 .container 和 .nav，它们都引用了 flex mixin，并且通过传参来改变具体的样式。
Mixin 的应用非常灵活，可以用于封装任何重复的代码块。但是，需要注意的是，如果我们在多个选择器中引用同一个 mixin，它们都会生成相同的样式，这可能会造成代码冗余。
Placeholder 的特点
与 mixin 不同，placeholder 不能接收参数，它只能在选择器中被继承。使用 placeholder 可以避免代码冗余，因为每个选择器只会生成自己需要的样式。下面是一个简单的 placeholder 示例：
-- -------------------- ---- -------
------- -
-------- -------------
-------- --- -----
---------- -----
------------ -----------
----------- -------
------------ -------
--------------- -------
------- --------
------- --- ----- -----
-------------- ----
----------------- -----
------- -
----------------- --------
------------- --------
-
-------- -
----------------- --------
------------- --------
-
-
---- -
------- --------
------ -----
-
------------ -
------- --------
------ -----
----------------- --------
------------- --------
-------- -------- -
----------------- --------
------------- --------
-
-在上面的例子中，我们定义了一个名为 %button 的 placeholder，它包含了一个通用的按钮样式。我们还定义了两个选择器 .btn 和 .btn-primary，它们分别继承了 %button 并根据自己的需求添加了一些额外的样式。
Placeholder 的应用非常灵活，可以避免代码冗余，但是需要注意的是，如果我们在多个选择器中继承同一个 placeholder，它们都会生成相同的样式，这可能会造成代码冗余。
如何选择？
那么，如何选择 mixin 和 placeholder 呢？通常来说，如果你需要封装一些常用的样式，比如 flex 布局、清除浮动等，可以使用 mixin。如果你需要封装一个通用的样式模板，比如按钮、表单等，可以使用 placeholder。
当然，对于更复杂的场景，你也可以将 mixin 和 placeholder 混合使用，来充分发挥它们的优点。比如下面这个例子：
-- -------------------- ---- ------- ------ ------------------ -------- - ----------------- ---------- -------- ----- -------------- ----- ------- ------------ ------- --------------- - ----------- - ----------- --- ----- ----- - -------------- - -------------- --- ----- ----- - -------- - -------- ---------- - -------------- - -------- ------------------ ------ - ------------- - -------- ------------------ ------ -
在上面的例子中，我们定义了一个 mixin section 和两个 placeholder %border-top 和 %border-bottom。在 section mixin 中，我们继承了 %border-top 和 %border-bottom，并根据需要传递参数改变背景颜色。在选择器中，我们只需要引用 section mixin 即可。这样既避免了代码冗余，又提高了可复用性。
总结
SASS mixin 和 % placeholders 在前端开发中都是非常有用的语法。你可以根据自己的需求来选择 mixin 或者 placeholder 来简化 CSS 的编写。同时，需要注意避免代码冗余，才能充分发挥它们的优点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf6cc8b5eee0b5256bb477