Day17 Mixin 後，搭配 RWD

大家好，我是乌木白，今天要和大家介绍 Mixin 和 RWD 搭配该如何使用？

原本 RWD 写法

.header {
    font-size: 15px;
}

@media(max-width:768px){
    .header {
    font-size: 15px;
    }
}

@media(max-width:568px){
    .header {
    font-size: 13px;
    }
}

大多数我们在写 RWD的时候都是这样写，但是在程序码很多的时候，你会觉得很乱之外，还要每次一直重复写断点的语法，在我还没学习 Sass 的时候怎麽辣麽麻烦，但是学习 Sass 之後感觉眼睛亮了起来！

搭配 Mixin 写法

@mixin pad {
    @media(max-width:768px){
        @content
    }
}

@mixin phone {
    @media(max-width:568px){
        @content
    }
}

.header {
    width:500px;
    @include pad {
        width:300px;
    }
}

为什麽要这样写，原因是这样可以增加你的可读性，像我一开始自己学习 RWD 是在最後才写，每次都要双开萤幕或者是一只滑上滑下，这样浪费了很多时间，是因为这次参加了六角学院的切版直播班，才知道原来 RWD 是建议在写完每一个部分，就直接设定，而不要留到最後在写，因为可能会全部都改变！

大家记得要多练习喔～