撰寫手機樣式(@media可以參考#從零開始1️⃣6️⃣：RWD!!@media(max-width)和@media(min-width)這篇)

我設定了幾個斷點：

@mixin laptopS{
    @media(max-width:984px){
      @content;
    }
  }
@mixin pad{
    @media(max-width:768px){
      @content;
    }
  }
@mixin padS{
    @media(max-width:624px){
      @content;
    }
  }
@mixin padS-D{
  @media(min-width:624px){
    @content;
  }
}
@mixin mobile{
    @media(max-width:375px){
      @content;
    }
  }

p.s.也可以再設定variables，像是顏色、margin、padding等。

設定完後，下一篇開始切版!

💡分享：近期六角學院分享20份可商用得設計稿(真的太佛了)，附上文章連結：https://www.facebook.com/hexschool/posts/pfbid02cDLUBSiErvbdgw9HtqeKWQpgCLWZEY8dvPtjq53VU6Amc9ayoxPGpvg7K9BFpyZZl(內含設計稿網址)，分享給大家~

參考資料：

1. 甜點店商設計稿(可商用)-吳俊儀：https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/grid/?fbclid=IwAR1FdRhh7aYFQ67oXv3lO1BfhPr7ScYLrSSB7J83txA2TmTDZHaMJxE8deI

以上實作僅根據此系列提到的部分進行練習，細節沒有完全符合設計稿。請斟酌參考。