SASS 中的 % placeholder 与 @mixin 有什么区别？
在使用 SASS（Syntactically Awesome Style Sheets）进行前端开发时，初学者可能会遇到“% placeholder”和“@mixin”这两个概念。它们是 SASS 中非常重要的概念，本文将详细介绍它们的区别、使用方法以及如何选择使用哪个。
- % placeholder
% placeholder（百分号占位符）是 SASS 中定义的一种占位符规则，作用类似于 CSS 中的类选择器。% placeholder 本身不会编译成 CSS 样式，只会在编译时被其它选择器所引用，从而生成相应的 CSS 样式规则。
使用 % placeholder 可以帮助我们定义一些常见的样式模板，比如：
-- -------------------- ---- -------
------- -
-------------- ----
-
------------- -
-------- ------
------- - -----
-
--------- -
---------
------- -
-------- - --
-------- ------
-
------- -
------ -----
-
------------- -
----- --
-
-可以看到，% placeholder 定义时需要在选择器前加上百分号，表示这是一个占位符，不会直接编译成 CSS 样式规则。这样定义后，我们就可以在其它选择器中使用这些占位符，从而生成对应的 CSS 样式：
-- -------------------- ---- ------- ---------- - ------- -------- -- -- ------- ------- ----------------- ----- ------ ------ ------- ------ - ----------- - ------- -------------- -- -- ------------- ------- ------ ------ ------- ------ ----------------- ----- - ------------- - ------- ---------- -- -- --------- ------- ------ ------ ------- ------ ----------------- ----- -
可以看到，使用 @extend 命令可以继承 % placeholder 中的样式，从而实现代码的复用。最终编译出来的 CSS 样式如下：
-- -------------------- ---- ------- ----------- ----------- - -------------- ---- - ------------ ------------- - -------- ------ ------- - ----- - --------------------- ------------------- - -------- - -- -------- ------ - ------------------- - ------ ----- - ------------------------- - ----- -- - ---------- - ----------------- ----- ------ ------ ------- ------ - ----------- - ------ ------ ------- ------ ----------------- ----- - ------------- - ------ ------ ------- ------ ----------------- ----- -
- @mixin
@mixin 是 SASS 定义的一种混入（mixin）规则，可以用来定义带有参数的样式模板。相比于 % placeholder，@mixin 更加灵活，可以传递参数并生成不同的样式规则。
一个简单的 @mixin 示例：
@mixin border-radius($radius) {
border-radius: $radius;
}这是一个定义圆角半径的 @mixin，我们可以在它后面传入一个参数 $radius，从而动态生成不同的圆角半径。比如：
-- -------------------- ---- ------- ------- - -------- ------------------- -- -- -------- -- ----------- ----------------- ----- ------ ----- -------- ----- - ------ - -------- ------------------- -- -- -------- -- ----------- ------ ------ ------- ------ ----------------- ------------------------- -
上面的示例中，我们通过 @include 命令调用了 @mixin，传递了不同的参数值，从而生成了不同的圆角样式规则。
- 区别与选择
% placeholder 和 @mixin 的最大区别在于它们生成 CSS 样式的方式不同。% placeholder 生成的样式都是通过 @extend 继承自其它选择器的；而 @mixin 生成的样式是通过 @include 在其它选择器中调用并生成的。
具体而言，% placeholder 更适合定义一些通用的样式模板，如上文中的圆形、居中、清除浮动等，可以通过继承 @extend 命令快速生成相应的样式。而 @mixin 则更适合定义一些带有参数的、动态生成样式的样式模板。
选择使用 % placeholder 还是 @mixin，可以根据具体的需求来定。如果需要定义一些通用的样式，可以选择 % placeholder；如果需要定义一些带有参数的、动态生成样式的样式模板，可以选择 @mixin。
总结
本文介绍了 SASS 中的 % placeholder 和 @mixin 两种重要的概念，分别介绍了它们的定义、使用方法和区别。通过学习本文，读者可以更好地理解这两种概念的使用场景，从而在实际前端开发中选择更加合适的方式来定义和生成样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c035e968c7c53b073b7f5