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