占位符选择器
Sass 有一种特殊的选择器,称为“占位符”。它看起来和行为很像一个类选择器,但它以%开头,并且不包含在 CSS 输出中。事实上,任何甚至包含占位符选择器的复杂选择器(逗号之间的选择器)都不会被编辑进 CSS 中,任何包含占位符选择器的样式规则也不被编译到 CSS 文件中。
scss 语法 | css 语法 |
---|---|
.alert:hover, %strong-alert { font-weight: bold; } %strong-alert:hover { color: red; } | .alert:hover { font-weight: bold; } |
占位符选择器有什么用?它仍然能被继承的!与类选择器不同,在占位符没有被
scss 语法 | css 语法 |
---|---|
%toolbelt { box-sizing: border-box; border-top: 1px rgba(#000, .12) solid; padding: 16px 0; width: 100%; &:hover { border: 2px rgba(#000, .5) solid; } } .action-buttons { | .action-buttons, .reset-buttons { box-sizing: border-box; border-top: 1px rgba(0, 0, 0, 0.12) solid; padding: 16px 0; width: 100%; } .action-buttons:hover, .reset-buttons:hover { border: 2px rgba(0, 0, 0, 0.5) solid; } .action-buttons { color: #4285f4; } .reset-buttons { color: #cddc39; } |
占位符选择器在编写每个样式规则都可能使用或不使用的 Sass 库时很有用。根据经验,如果您只是为自己的应用程序编写样式表,通常最好只扩展一个可用的类选择器。