在前端开发中，经常会遇到多个元素需要使用相同的样式规则，这时候我们就需要使用公共样式规则来减少代码的重复。在 SASS 中，我们可以使用占位符（%）来定义公共样式规则，以达到代码复用的目的。
什么是 SASS 占位符
占位符可以看作是一个不可见的 CSS 样式声明块，该样式声明块中提供的属性和值可以在 SASS 中作为一个“占位符”使用，一般用来定义公共的样式规则。使用占位符可以避免样式的重复定义，从而减少 CSS 文件大小。
如何定义 SASS 占位符
定义 SASS 占位符与定义普通样式规则基本一致，只是在样式名称前面加一个百分号（%）。下面是一个示例：
-- -------------------- ---- ------- -------------- - -------- ----- ------- --- ----- ----- - --------------- - ------- --------------- ----------- ----- ------ ----- - --------------- - ------- --------------- ----------- -------- ------ ----- -
在上面的代码中，我们定义了一个名为“button-common”的占位符，并在“button-primary”和“button-default”中使用了该占位符。我们可以看到，“button-primary”和“button-default”两个类分别继承了“button-common”占位符中定义的样式。
如何使用 SASS 占位符
在 SASS 中，我们可以使用“@extend”指令来使用占位符。使用“@extend”指令后，SASS 将会把占位符中定义的所有样式属性复制到使用该占位符的选择器中。以下是一个使用占位符的示例：
-- -------------------- ---- ------- ------------ - ----------- ----- ------- -- -------- -- - -- - ------- ------------- ----------- -------- - -- - ------- ------------- ----------- ----- ------ ----- -
在上面的代码中，我们定义了一个名为“list-common”的占位符，并在“ul”和“ol”中使用了该占位符。我们可以看到，“ul”和“ol”选择器都继承了“list-common”占位符中定义的样式。
SASS 占位符的拓展
除了使用“@extend”指令，SASS 占位符还可以和其他 SASS 功能结合使用。下面是一些示例：
SASS 占位符和变量的结合使用
-- -------------------- ---- ------- ------------- ------ ------------------- - ------------- ------------- - ---- - ------- -------------------- ------------- ---- ----------- -------- - ------- - ------- -------------------- ------------- ---- ----------- ----- ------ ----- -
在上面的代码中，我们使用了变量来定义边框样式，并结合了占位符来复用代码。我们可以看到，“box”和“button”都继承了“borderStyle-common”占位符中定义的边框样式。
SASS 占位符和 Mixin 的结合使用
-- -------------------- ---- ------- ------ ----------- --------- ------- - -------- ----- --------------- ------ ---------------- --------- ------------ ------- - ------------ - -------- --------- ------- -------- - ---- - ------- ------------- ------ ------ ------- ------ ----------- -------- - ------- - ------- ------------- ------ ------ ------- ----- ----------- ----- ------ ----- -
在上面的代码中，我们定义了一个名为“flex-common”的占位符，并使用 Mixin 来定义样式属性。我们可以看到，“box”和“button”都继承了“flex-common”占位符中定义的样式。
总结
SASS 占位符可以帮助我们定义公共样式规则，从而避免样式的重复定义，减少 CSS 文件大小。在使用占位符时，我们可以和其他 SASS 功能结合使用，从而更加灵活地实现代码复用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b37f3948841e9894fc5990