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