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

2021年4月9日16:53:54 发表评论 846 次浏览

占位符是另一种特殊的选择器。在编写自己的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使用它, 如上面的示例所示。


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: