Sass @mixin实现RWD DAY36

今天我们要来介绍
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 设计模式
若有任何问题 或 内容有误
请不吝啬的回覆我唷~~