今天意外需要早點上來解每日任務，因為晚上要看半澤先發就可以專心看了(X

昨天我們有稍微提到@extend，今天我們用一些範例來探討一下使用方式

編譯前
.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

編譯後
.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

這個就是一個很基本@extend範例，共用繼承的樣式位置會往前提升， 繼承同一個 css 的 class，編譯出的內容會放在一起。

!optional的用法

.notice {
    color: ＃F00;
    font-size: 16px;
}

.important {
    @extend .notice2 !optional;
}

加上「!optional」修飾詞，表示當extend不存在樣式名稱時，則不做編譯，是很神奇看了官網介紹才知道這個東西作法，如果我們去做@extend，萬一沒有這個屬性，直接編譯這樣會產生錯誤的，這時候我們可以透過！optional，讓他不會沒有存在樣式，不會爆錯也可以編譯

編譯前
@media screen and (max-width: 600px) {
  .error--serious {
    @extend .error;
  }
}

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media範圍裡面使用@extend 呼叫指定樣式名稱時，該樣式不能放在@media 範圍之外，否則會出錯，@media 範圍裡面才行，這個基本上這樣設定是蠻合理方式，主要是我們的@extend會把共用拿出去外面做完使用，而這樣拉去出去外層，有可能導致我們不了解原始的斷點是設定在哪個位置，上述是推測因為這樣原因，所以不能使用在斷點裡面，如果要用必須要全部設定斷點裡面就不會有這樣的問題

後面還有他跟mixin的愛恨情仇，等到後面主角(mixin)出現我們再來解釋吧