#### 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,B,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; } ~~~