iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

如何成為一名斜槓煉金術士,學習前端相關技能系列 第 17

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 是建議在寫完每一個部分,就直接設定,而不要留到最後在寫,因為可能會全部都改變!

大家記得要多練習喔~


上一篇
Day16 Sass Mixin
下一篇
Day18 遇到問題該怎麼辦?
系列文
如何成為一名斜槓煉金術士,學習前端相關技能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言