SASS（Syntactically Awesome Style Sheets）是一种 CSS 的预处理器，它扩展了 CSS 语法，使得样式表的编写更加方便和简洁。其中一个实用技巧就是使用 % 定义 SASS 的占位符，这个技巧可以有效提高代码的复用性和可维护性。
什么是 SASS 的占位符？
在 SASS 中，占位符是一种特殊的选择器，以 % 开头，表示一个不会被编译成 CSS 的选择器。它只是一个占位符，可以在其他样式中引用，以达到代码的复用。
为什么要使用 SASS 的占位符？
使用 SASS 的占位符可以有效的减少重复的 CSS 代码。在样式表中定义一个占位符，然后通过 @extend 将占位符应用到其他样式中，可以避免写重复的 CSS 代码。而且，如果你需要修改这个占位符的样式，只需要修改一处即可，而不需要修改每一个使用了这个占位符的样式。
如何定义和使用 SASS 的占位符？
定义 SASS 的占位符非常简单，只需要在选择器前面加上 % 即可：
-- -------------------- ---- -------
------- -
-------------- ----
-------- -----
----------------- --------
------ -----
----------- -------
------- --------
------- -
----------------- --------
-
-使用 SASS 的占位符也很简单，只需要在需要应用这个样式的选择器后面加上 @extend，然后将占位符的名称放在后面即可：
-- -------------------- ---- ------- ------- - ------- -------- ---------- ----- - -------------- - ------- -------- ------- ----- -------- ----- -
这样，button 和 submit-button 就都应用了 %button 这个占位符的样式。
注意事项
虽然 SASS 的占位符可以提高 CSS 的复用性和可维护性，但是使用的不当也可能会造成代码的混乱和冗余。要注意以下事项：
- 避免过多的使用占位符，否则可能会造成样式的不可预测性和维护困难。
- 避免在占位符中使用过于具体的样式，比如直接定义字体大小、颜色等，这样可能会导致样式的不灵活性。
- 在使用占位符的时候，也要考虑选择器的权重，避免出现意外的样式优先级问题。
结论
使用 SASS 的占位符是一种简单而有效的代码复用技巧，它可以提高 CSS 的可维护性和可读性。但是，我们也要慎重考虑如何使用占位符，以避免造成代码混乱和冗余。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677666026d66e0f9aa200336