摘录自Understanding placeholder selectors.

&＃64;extend

&＃64;extend让你能够在多个选择器中通过继承的方式共享一段样式:

.icon {transition: background-color ease .2s;margin: 0 .5em;
}.error-icon {&＃64;extend .icon;/* error specific styles... */
}.info-icon {&＃64;extend .icon;/* info specific styles... */
}

会被转化为:

.icon, .error-icon, .info-icon {transition: background-color ease .2s;margin: 0 .5em;
}.error-icon {/* error specific styles... */
}.info-icon {/* info specific styles... */
}

有个问题就是, 如果你不可能用到icon这个类呢?

占位符选择器%

占位符选择器(Placeholder Selector)是以%而不是.作为开始符的选择器. 它自身不会出现在编译后的CSS文件中, 只会出现在&＃64;extend了它的那些选择器中.

上例中, 用%icon替换.icon会得到:

.error-icon, .info-icon {transition: background-color ease .2s;margin: 0 .5em;
}.error-icon {/* error specific styles... */
}.info-icon {/* info specific styles... */
}

CSS中不会出现.icon类!

&＃64;extend vs. &＃64;include

乍看下, %选择器和无参数mixin差不多, 在浏览器中产生的效果是一样的, 但是编译后的CSS有很大不同.

&＃64;mixin icon {transition: background-color ease .2s;margin: 0 .5em;
}.error-icon {&＃64;include icon;/* error specific styles... */
}.info-icon {&＃64;include icon;/* info specific styles... */
}

以上代码会编译成

.error-icon {transition: background-color ease .2s;margin: 0 .5em;/* error specific styles... */
}.info-icon {transition: background-color ease .2s;margin: 0 .5em;/* info specific styles... */
}

可以看到, .error-icon和.info-icon中继承自mixinicon的部分重复了两次, 有冗余. 但是用%选择器配合&＃64;extend就不会有这样的问题.

&＃64;extend的限制

&＃64;extend有个限制, 就是你不能&＃64;extend不同&＃64;media块中的样式. 这个限制同样对%选择器有效.

%icon {transition: background-color ease .2s;margin: 0 .5em;
}&＃64;media screen {.error-icon {&＃64;extend %icon;}.info-icon {&＃64;extend %icon;}
}

这会导致编译错误:

You may not &＃64;extend an outer selector from within &＃64;media.
You may only &＃64;extend selectors within the same directive.
From "&＃64;extend %icon" on line 8 of icons.scss

这是由于&＃64;extend的实现方式其实是用调用&＃64;extend的类替换被&＃64;extend的类, 上例中即用.error-icon, .info-icon替换%icon. 但是由于这些调用&＃64;extend的类属于&＃64;media块, 这样直接替换会导致替换后的规则脱离&＃64;media块, 因此是非法的.

但是, 反过来就没事儿. 因为%icon属性原本就是在&＃64;media内部生效的, .error-icon, .info-icon继承来的这部分规则自然也只应该在该&＃64;media下生效.

&＃64;media screen {%icon {transition: background-color ease .2s;margin: 0 .5em;}
}.error-icon {&＃64;extend %icon;background-color: red;
}.info-icon {&＃64;extend %icon;background-color: green;
}

会被编译成

&＃64;media screen {.error-icon, .info-icon {transition: background-color ease .2s;margin: 0 .5em;}
}.error-icon {background-color: red;
}.info-icon {background-color: green;
}