标签：div image ima ace .com color IV 代码 error
Sass 中的 @extend 是用来扩展选择器或占位符。比如：
.error { border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url("/image/hacked.png"); } .seriousError { @extend .error; border-width: 3px; }
被编译为：
.error, .seriousError { border: 1px #f00; background-color: #fdd; } .error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); } .seriousError { border-width: 3px; }
扩展选择器：
@extend 不止扩展类选择器，还可以扩展任何选择器，比如 .special.cool, a:hover, 或 a.user[href^=“http://“]，例如：
.hoverlink { @extend a:hover; } a:hover { text-decoration: underline; }
编译出来：
a:hover, .hoverlink { text-decoration: underline; }
再来看一个复杂点的：
.hoverlink { @extend a:hover; } .comment a.user:hover { font-weight: bold; }
编译出来的CSS
.comment a.user:hover, .comment .user.hoverlink { font-weight: bold; }
多个扩展
所设某个样式要继承多个地方的样式，那么可以使用 @extend 来继承多个选择器或占位符的样式，如：
.error { border: 1px #f00; background-color: #fdd; } .attention { font-size: 3em; background-color: #ff0; } .seriousError { @extend .error; @extend .attention; border-width: 3px; }
编译出来的CSS
.error, .seriousError { border: 1px #f00; background-color: #fdd; } .attention, .seriousError { font-size: 3em; background-color: #ff0; } .seriousError { border-width: 3px; }
扩展单一选择器
前面我们知道 %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。比如下面的代码：
#context a%extreme { color: blue; font-weight: bold; font-size: 2em; }
这段代码在不调用之前不产生任何代码，只有能过@extend调用之后才生成代码：
.notice { @extend %extreme; }
编译出来的CSS
#context a.notice { color: blue; font-weight: bold; font-size: 2em; }
标签：div image ima ace .com color IV 代码 error
原文地址：https://www.cnblogs.com/qjuly/p/9128657.html
