SASS如何使用占位符选择器（用法示例） _SASS

占位符是另一种特殊的选择器。在编写自己的SASS库时使用它。它的工作与没有参数的mixin非常相似。
占位符选择器以%符号开头。
语法如下：

%( name_of_selector ) { property: value; ... }

SASS文件的编译中不包含占位符选择器(这定义了文件的主要功能。请参见下面的"占位符选择器的使用")。所以问题是：如何使用它？
要使用占位符选择器, 我们使用@延伸规则。
语法如下：

@extend %( name_of_selector );

例子：
【SASS如何使用占位符选择器（用法示例）】SASS文件：

%button-format { padding: 10px 20px; border-radius: 15px; color: black; }.toolbar-button { @extend %button-format; background-color: lightpink; & :hover { background-color: rgb(155, 106, 114); } }.status-bar-button { @extend %button-format; background-color: lightblue; & :hover { background-color: blue; } }

编译的CSS文件：

.status-bar-button, .toolbar-button { padding: 10px 20px; border-radius: 15px; color: black; }.toolbar-button { background-color: lightpink; } .toolbar-button:hover { background-color: #9b6a72; }.status-bar-button { background-color: lightblue; } .status-bar-button:hover { background-color: blue; }

占位符选择器的使用：
占位符选择器未包含在SASS文件的编译中, 因此用于创建SASS库。我们可以使用它预定义一些模板, 然后可以根据需要通过@extend at-rule使用它, 如上面的示例所示。