【SCSS】2.8 @extend (共用)

@extend翻譯成共用或是繼承，在瀏覽一些別人的學習心得時發現，有人認為 @extand 會讓CSS品質變差，所以不建議使用。


真正在執行專案的時候，我是不太使用@extend，雖然在SCSS 裡寫@extend會讓程式碼變短，看似很是方便，但解譯後的CSS不易閱讀，整體的CSS體積也會變大。如果小專案也許CSS微胖並沒有什麼影響，但是大專案對CSS的K數是很斤斤計較的（就像女人對自己的體重一樣，能少0.1Kg也是好的！！！）。


我們用實際的語法來說明

語法範例SCSS

//設定小圖示

.miao-icon{ display: inline-block; width: 24px; height: 24px; vertical-align: middle; background: url(../Images/icon.png) no-repeat 80px 80px; background-size: 48px;}

.miao-icon_prev {

@extend .miao-icon;

 background-position: 0px 0px;

}

.miao-icon_next     { @extend .miao-icon; background-position: 0px -24px;}

.miao-icon_up       { @extend .miao-icon; background-position: 0px -48px;}

.miao-icon_down     { @extend .miao-icon; background-position: 0px -72px;}

編譯後CSS

.miao-icon, .miao-icon_prev, .miao-icon_next, .miao-icon_up, .miao-icon_down {

display: inline-block;

width: 24px;

height: 24px;

vertical-align: middle;

background: url(../Images/icon.png) no-repeat 80px 80px;

background-size: 48px;

}

.miao-icon_prev { background-position: 0px 0px;}

.miao-icon_next { background-position: 0px -24px;}

.miao-icon_up { background-position: 0px -48px;}

.miao-icon_down { background-position: 0px -72px;}

若是真的要使用的話，要有所限制，建議：

1. 層次越扁平越好，最好是一層
2. 單元性使用，不要跨單元

在原始CSS裡有個語法類似@extend，叫做[class*='miao-icon']用上述的例子，純CSS這樣寫也能達到一樣的效果

語法範例SCSS

[class*='miao-icon']{ display: inline-block; width: 24px; height: 24px; vertical-align: middle; background: url(../Images/icon.png) no-repeat 80px 80px; background-size: 48px;}

[class*='miao-icon-prev']     { background-position: 0px 0px;}

[class*='miao-icon-next']     { background-position: 0px -24px;}

[class*='miao-icon-up']       { background-position: 0px -48px;}

[class*='miao-icon-down']     { background-position: 0px -72px;}