#### 1.5继承@extend **sass中，选择器继承可以让选择器B继承另一个选择器A的*所有样式*，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。此需要写在选择器B里面，则编译成css的时候，联合声明时，B永远都在A后面**， 格式：@extend 要继承的选择器名称； #### 1.5.1普通继承 列：scss样式： ~~~ .one { width:100px; height:100px; } .two { @extend .one; //继承的样式 background:red;/*独立的样式*/ border:5px solid #000; } ~~~ 转化成css样式 ~~~ .one, .two { width: 100px; height: 100px; } //.two继承了.one的样式，并和.one联合声明 .two { background: red; border: 5px solid #000; } ~~~ #### 1.5.2继承复杂的选择器 **注意：选择器继承书写没有顺序，可以先书写选择器B，写上@extend .A，然后在下面写上选择器A的样式，也可以** 列：scss样式 ~~~ .hoverlink { @extend a:hover; } a:hover { text-decoration: underline; } ~~~ 转化成css样式 ~~~ a:hover, .hoverlink { text-decoration: underline; } ~~~ #### 1.5.3继承多个选择器 **注意：1.即选择器B要多个选择器的样式，则书写一个@extend，后面书写选择器，选择之间用逗号`,`隔开，** 列：scss样式 ~~~ .one { width:100px; height:100px; } .two { /*继承的样式 选择器之间用逗号隔开了*/ @extend .one, .three; /*独立的样式*/ background:red; border:5px solid #000; } .three { padding:10px; } ~~~ 转化成css样式 ~~~ one, .two { width: 100px; height: 100px; } .two { /*继承的样式*/ /*独立的样式*/ background: red; border: 5px solid #000; } .three, .two { padding: 10px; } ~~~ **留意：**编译成css的顺序跟scss中one（A），two（B要继承的选择器），three（C）顺序有关，如ABC，则变成css则是AB，Ｂ，CB，如果是ACB，是变成css是AB，CB，C。如果是BAC，则变成css是B，AB，CB，如果是BCA，则变成css是B，CB，AB。 #### 1.5.4链型继承 **注意：即类名“.C”继承类名“.B”，而类名“.B”又继承了类名“.A”** 列：scss样式 ~~~ .one { width:100px; height:100px; } .two { /*继承的样式*/ @extend .one; /*独立的样式*/ background:red; border:5px solid #000; } .three { /*继承的样式*/ @extend .two; /*独立的样式*/ padding:10px; } ~~~ 转化成css样式 ~~~ .one, .two, .three { /*继承的样式*/ width: 100px; height: 100px; } .two, .three { /*独立的样式*/ background: red; border: 5px solid #000; } .three { /*独立的样式*/ padding: 10px; } ~~~ #### 1.5.5继承的局限性 虽然能够继承的选择器数量很多，但是也有很多选择器并不被支持继承的，如包含选择器(.one .two)或者相邻兄弟选择器(.one+.two)目前还是不支持继承。但若继承的元素是“a”，恰巧这个元素“a”又有hover状态的样式，那么hover状态的样式也会被继承。 列：scss样式 ~~~ .myLink { @extend a; } a { color: blue; &:hover { text-decoration: underline; } } ~~~ 转化成css样式 ~~~ a, .myLink { color: blue; } a:hover, .myLink:hover { text-decoration: underline; } ~~~