SASS @etend官方文档剖析
@extend用法剖析
我们经常会遇到这样的情况，当我们在开发页面时候一个class需要包含前一个class的所有样式，但是又必须有他自己特殊新增的样式。但是这两个class其实都是相差无几的，只是有细微的差别。比如错误提示的样式(.error和.specialerror),既然后着只是比前者多一两句样式，为何还要写两个class呢，因为我们不想把前者.error的样式重新在写一遍，无聊极了。但是这样带来一个问题，就是html标签上会多出好几个class。
为了解决这个问题，sass里提供了@extend的解决方法
先看一个例子：
Oh no! You've been hacked!我们的css如下
.error { border: 1px # f00; background-color: # fdd;}.specialerror { border-width: 3px;}这里就出现我们刚说的问题了，其实我们心里是十万个不愿意就这么在后面唐突的加个specialerror的，因为如果只写specialerror，就丢失了前面的样式（为什么呢，因为我们没有在specialerror里复写error的样式，只是新增了）
通过Sass的@extend，一个选择器将继承另一个选择器的样式
例如：
.error { border: 1px # f00; background-color: # fdd;}.specialerror { @extend .error; border-width: 3px;}被编译为：
.error, .specialerror { border: 1px # f00; background-color: # fdd;}.specialerror { border-width: 3px;}意味着.error所有的样式都会加到.specialerror上，这样.specialerror就会有.error的样式了。这样我们就可以只写.specialerror了。目前就先这样理解，其实这个@extend实现的方式是跟我们现实逻辑颠倒的。
但是如果改成这样：
.error { border: 1px # f00; background-color: # fdd; } .specialerror { @extend .error; border-width: 3px; } .error.intrusion { background-image: url("/image/hacked.png"); }加上面这段样式后 就会加上和一样的背景
怎么做到的呢
.error { border: 1px # f00; background-color: # fdd; }.error.intrusion { background-image: url("/image/hacked.png");}.specialerror { @extend .error; border-width: 3px;}被编译为：
.error, .specialerror { border: 1px # f00; background-color: # fdd; }.error.intrusion, .specialerror.intrusion { background-image: url("/image/hacked.png"); }.specialerror { border-width: 3px; }这里需要重点讲解下，其实我们正常理解增加扩充添加就是copy然后paste,是的，这样思考其实也是对的，就像文章一开始那个最简单的例子。但是为了避免不必要的重复。@extend的逻辑稍稍不同。你可以这样认为，使用@extend时候sass会将.error相关样式先拷贝一份，
.specialerror { @extend .error; border-width: 3px; }然后把字符“specialerror”存储在@extend里，遇到”error“字符就进行替换，这样.specialerror就有了.error的样式啦！这也就能解释，为什么会出现下面.specialerror.intrusion的原因了。
.error.intrusion, .specialerror.intrusion { background-image: url("/image/hacked.png"); }当组合选择器的样式时， @extend 能够很聪明得避免不必要的重复，例如.seriousError.seriousError会被转换成.seriousError。不会生成类似# main# footer的不可用选择器。
求证例子：
.hoverlink { @extend a:hover;}a:hover { text-decoration: underline;}被编译为：
a:hover, .hoverlink { text-decoration: underline; }就像上面的.error.intrusion ,任何使用 a:hover 都会替换为 .hoverlink,即使中间包含其他选择器。例如：
.hoverlink { @extend a:hover;}.comment a.user:hover { font-weight: bold;}被编译为：
.comment a.user:hover, .comment .user.hoverlink { font-weight: bold; }Multiple Extends
一个选择器还可以扩充多个选择器的样式例如：
.error { border: 1px # f00; background-color: # fdd;}.attention { font-size: 3em; background-color: # ff0;}.seriousError { @extend .error; @extend .attention; border-width: 3px;}被编译为：
.error, .seriousError { border: 1px # f00; background-color: # fdd; }.attention, .seriousError { font-size: 3em; background-color: # ff0; }.seriousError { border-width: 3px; }对于下面这种只需注意下就行，就是.criticalError内 “@extend .seriousError”这句话。在运行这句语句时候，sass会检测到.seriousError内有“@extend .error”。
所以.criticalError既有.error的样式也有.seriousError的样式，故criticalError需要替换的是error和seriousError。
.error { border: 1px # f00; background-color: # fdd;}.seriousError { @extend .error; border-width: 3px;}.criticalError { @extend .seriousError; position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%;}被编译为：
.error, .seriousError, .criticalError { border: 1px # f00; background-color: # fdd; }.seriousError, .criticalError { border-width: 3px; }.criticalError { position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; }选择器序列
例如.foo .bar或者 .foo + .bar, 目前还不能被扩展. 但是对于嵌套的选择器还是可以使用@extend添加到其他选择器的 例如：
# fake-links .link { @extend a;}a { color: blue; &:hover { text-decoration: underline; }}编译为：
a, # fake-links .link { color: blue; } a:hover, # fake-links .link:hover { text-decoration: underline; }当两个没有共同点的序列扩充组合时候, 将会产生两个不同的选择器: 一种是第一个序列在前，另一种是第二个序列在前例如： # admin .tabbar会和# demo .overview调换位置。
# admin .tabbar a { font-weight: bold;}# demo .overview .fakelink { @extend a;}被编译为：
# admin .tabbar a,# admin .tabbar # demo .overview .fakelink,# demo .overview # admin .tabbar .fakelink { font-weight: bold; }如果另个序列有一些共同的选择器，这些选择器将会被组合在一起而且只有不同的将会保留下来。下面这个例子中， 每个写都包含id # admin, 所以产生的选择器就会合并这两个# admin。# admin .tabbar和 # admin .overview会调换位置，换完之后在省略重复的。
# admin .tabbar a { font-weight: bold; } # admin .overview .fakelink { @extend a; }这被编译为：
# admin .tabbar a, # admin .tabbar .overview .fakelink, # admin .overview .tabbar .fakelink { font-weight: bold; }关键字：sass, css
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
