Sass-@extend
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; }