在Sass（Syntactically Awesome Stylesheets）中，占位符选择器（Placeholder Selectors）是一个以 % 开头的特殊类型的选择器。它们的主要作用是允许你定义一个样式规则集，但不会直接应用于任何HTML元素。相反，这些规则集可以通过 @extend 指令被其他选择器所继承。
占位符选择器 %foo 的作用
%foo 是一个占位符选择器，它定义了一组样式规则，但不会自动应用于任何HTML元素。只有当其他选择器通过 @extend %foo; 指令来继承 %foo 的样式时，这些样式才会被应用。
使用场景
占位符选择器在需要重用样式规则的场景中特别有用，特别是当你想要避免在编译后的CSS中生成冗余代码时。
假设你有一个按钮样式，这个样式需要在多个地方使用，但是你又不想在CSS中重复这个样式。你可以使用占位符选择器来定义这个样式，然后通过 @extend 在需要的地方继承这个样式。
示例
%button-base {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
border: none;
cursor: pointer;
}
.primary-button {
@extend %button-base;
background-color: blue;
color: white;
}
.secondary-button {
@extend %button-base;
background-color: gray;
color: white;
}
在这个示例中，%button-base 是一个占位符选择器，它定义了一个基础的按钮样式。.primary-button 和 .secondary-button 通过 @extend %button-base; 继承了这个基础样式，并各自添加了额外的样式。
与其他占位符的选择方法
在Sass中，没有直接选择或查询占位符选择器的方法。占位符选择器的主要目的是通过 @extend 指令来被其他选择器继承，而不是被直接应用到HTML元素上。
然而，你可以通过查看编译后的CSS文件来间接地查看哪些选择器继承了占位符选择器的样式。在上面的示例中，编译后的CSS将包含 .primary-button 和 .secondary-button 的样式，这些样式将包含从 %button-base 继承的样式规则。
