哇～終於剩下9天開心了，不過這周連假還是要繼續要寫啊，可怕這時候有錯覺的提早寫好像可以比較早解脫？，這樣還是要寫30天不會比較少啊，好了不廢話今天就直接進入範例囉，今天部分說明會直接寫在程式碼裡面

@mixin media($name) {
  // 預設範圍
  $breakpoints: (
    xs: auto 576px,
    sm: 576px 768px,
    md: 768px 992px,
    lg: 992px 1200px,
    xl: 1200px auto,
  );

  $point: map-get(
    $breakpoints,
    $name
  ); //如我們輸入lg，就會取得breakpoints對應的key+value

  @if $point {
    $min: nth($point, 1); //取的值第一筆數值
    $max: nth($point, 2); //取的值第二筆數值

    //min 跟 max判斷顯示哪一段 media query
    @if $min == auto {
      @media (max-width: $max) {
        // 是 ＠mixin { } 中的內容，而一個 mixin 只能擁有一個
        @content;//額外將程式碼帶進放置的位置
      }
    } @else if $max == auto {
      @media (min-width: $min) {
        @content;
      }
    } @else {
      @media (min-width: $min) and (max-width: $max) {
        @content;
      }
    }
  }
}

h1 {
  a {
    color: red;
    @include media(xl) {
      color: #0f0;
    }
    @include media(lg) {
      color: blue;
    }
    @include media(xs) {
      color: #ccc;
    }
  }
}

//編譯後的結果
h1 a {
  color: red;
}
@media (min-width: 1200px) {
  h1 a {
    color: #0f0;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  h1 a {
    color: blue;
  }
}
@media (max-width: 576px) {
  h1 a {
    color: #ccc;
  }
}

今天我們用的範例，就是我們可以利用自己設定media輸入特定字串，產生出對應的斷點，我們會在＄breakpoints裡面設定我們要制定的範圍，我們使用也是一般的斷點，我透過$map-get取的我們要的值，利用判斷式來判斷我們要使用怎樣斷點方式，至於斷點為啥這樣是css範圍就不細明說明囉，最小值等於autoy最大值576px以上我們就使用max-width的斷點範圍，今天內容可以跟昨天合併一起使用，可以透過快速鍵的方式設定 @include media(xl）這一段的mixin，我之前就會設定名稱r1200快速鍵，當我輸入r1200就會快速產出這一段程式碼，基本上我在寫斷點時候通常不太會只有一次可能不同地方都會用到，使用快速鍵方式一來可以增加撰寫速度，只有第一次的成本要建立快速鍵時候會比較多成本，基本上後面都是爽爽用