Sass - 占位符选择器(%placeholder)

前言

如果你已经了解了 @extend指令 则直接阅读即可，否则你需要先学习：传送门

%占位符选择器语法：

占位选择器看起来很像普通的 class 和 id 选择器，只是 # 或 . 被替换成了 %，他可以像 class 或者 id 选择器那样使用，需要注意的是，它本身的规则不会被编译到 CSS 文件中。

%demo {
  /* 一些规则 */
}

初识占位符选择器

它取代以前 CSS 中的基类造成的代码冗余的情形，因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码，来看下面这个例子：

%demo1 {
    border-radius:50%;
}

%demo2 {
    background:red;
}

编译为CSS：

null(空)

可以看到，正如上面所说，不被 @extend 调用的话，不会有任何规则代码产生！

使用 @extend 调用：

%demo1 {
    border-radius:50%;
}

%demo2 {
    background:red;
}

/* 调用 */
a{
    @extend %demo1;
    @extend %demo2;
}

编译为CSS：

a { border-radius: 50%; }
a { background: red; }

可以看到，$demo1 与 $demo2没有被编译，只有被 @extend 调用才会产生相关规则代码！

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。

其他用处

有时候你只会想写一个 @extend 扩展样式类，而且不想直接在你的HTML中使用。在写一个 Sass 样式库时，这是特别有用，如果他们需要，在这里你可以提供 @extend 扩展样式给用户，如果他们不需要，直接被忽视。

对于上面这种情况，如果使用普通的样式类，在最终生成的样式表中会有很多额外的CSS，并且在HTML被使用时，很容易和其他样式类结合的时造成冲突。

选择器占位符的限制

使用 @extend 调用定义好的选择器占位符 %placeholder 有所限制，他不能在不同的 @media 中运行：

%demo1 {
    border-radius:50%;
}

%demo2 {
    background:red;
}

/* 调用 */
@media screen {
    a{ @extend %demo2; }
    div{ @extend %demo1; }
}

抛出错误： Error解释：

因为@extend是将一个选择器样式扩展到另一个选择器当中，而实际上在不同的@media中却无需复制这些样式。

在 @media 块中定义选择器占位符，在 @extend 调用时，将会将整个样式包含在 @media 区块中：

@media screen {
    %demo1{border-radius:50%;}
    %demo2{background:red;}
}

a{
    @extend %demo1;
}

div{
    @extend %demo2;
}

编译为CSS代码：

@media screen {
  a { border-radius: 50%; }
  div { background: red; } 
}

在某些情况下，@extend 可以大大的减化 CSS 输出，并显著提高你的 CSS 性能！