SASS |占位符选择器

占位符是另一种特殊的选择器。它在您编写自己的 SASS 库时使用。它的工作与没有参数的 mixin 非常相似。

占位符选择器以 % 符号开头。

句法：

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

占位符选择器不包括在 SASS 文件的编译中(这定义了它的主要功能。请参阅下面的“占位符选择器的使用”)。所以问题是：如何使用它?

要使用占位符选择器，我们使用@extend at-rule。

句法：

@extend %( name_of_selector );

例子：

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 使用它，如上例所示。