SASS如何使用占位符选择器？用法示例

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

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

语法如下：

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

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

要使用占位符选择器, 我们使用@延伸规则。

语法如下：

@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使用它, 如上面的示例所示。

---