今天我們要來介紹
Sass Mixin 與 content的搭配 來解決RWD

Scss:

@mixin pad{
    @media(max-width: 768px){
        //要記得寫 @content
        @content
    }
}
@mixin mobile{
    @media(max-width: 568px){
        @content
    }
}
.header{
    width: 500px;
    @include pad{
        width: 100px;
        font-size: 20px;
    }
    @include mobile{
        font-size: 10px;
    }
}

編譯後的css:

.header {
  width: 500px;
}
@media (max-width: 768px) {
  .header {
    width: 100px;
    font-size: 20px;
  }
}
@media (max-width: 568px) {
  .header {
    font-size: 10px;
  }
}

CodePen: https://codepen.io/wemyferb/pen/dyXPjjV
這裡要注意
如果 mixin 檔案太多程式碼
也可以把 mixin拆開來管理(一個功能拆一支)
或是直接建立一個 mixin資料夾來管理

那今天的 mixin 搭配 content 來實現 RWD就介紹到這裡啦~~
明天將介紹
Sass/CSS 設計模式
若有任何問題 或 內容有誤
請不吝嗇的回覆我唷~~