使用sass mixin來開發responsive網站

前言

RWD為響應式網站(Responsive Web Design)的縮寫,為2012年以來,最流行的前端技術之一,通過CSS3的Media Query,可以讓網頁在不同尺寸的裝置下,都可以套用不一樣的CSS Style,讓每個不同裝置同樣瀏覽網頁,都可以用最佳的畫面來瀏覽。而為了要開發RWD的網頁與簡化撰寫CSS流程,進而有了SASS、LESS等工具來協助開發,但是難免開發久了,不免都還是會覺得又臭又長。利用SASS的Mixin功能,搭配本篇特殊結構,可以讓開發模板的時間更為簡潔。

傳統media queries寫法:

//電腦版
 @media all and (min-width: 960px) {
     .div1{
            padding:20px;
           }
     .div2{
            margin:20px;
           }
}
//平板
@media all and (min-width: 760px) and (max-width: 959px) {
     .div1{
           padding:10px;
           }
     .div2{
            margin:10px;
           }
}
//小平板
@media all and (min-width: 480px) and (max-width: 759px) {
     .div1{
            padding:5px;
           }
     .div2{
            margin:5px;
           }
}
//手機
@media all and (max-width: 480px) {
     .div1{
           padding:0px;
           }
     .div2{
            margin:0px;
           }
}

上面範例,是我們一開始在開發響應式前台的寫法,可是當你需要下的區塊樣式一多,responsive的code隨隨便便就到800,900甚至1000多行時
你只不過想改一個div的樣式,你可能就需要找個老半天,改了4個media queries的div樣式,才能達到你想要的效果。

有沒有想過如果4個media queries的樣式能整合在一起寫有多好?

第二種寫法:


.div1{ //電腦版 @media all and (min-width: 960px) { padding:20px; } //平板 @media all and (min-width: 760px) and (max-width: 959px) { padding:10px; } //小平板 @media all and (min-width: 480px) and (max-width: 759px) { padding:5px; } //手機 @media all and (max-width: 480px) { padding:0px; } } .div2{ //電腦版 @media all and (min-width: 960px) { margin:20px; } //平板 @media all and (min-width: 760px) and (max-width: 959px) { margin:10px; } //小平板 @media all and (min-width: 480px) and (max-width: 759px) { margin:5px; } //手機 @media all and (max-width: 480px) { margin:0px; } }

假設現在你code已經寫了800 900行,你不需要像第一種方式一樣,去慢慢翻4個media queries裡的div1,來更改div1的樣式,你只需要找到1次你的div1,就可以對4個media queries來寫你個樣式。
比起第一種寫法省略非常多的時間,在尋找code。

但此種方式也有一些很可怕的缺點:

1.@media all and (min-width: 760px) and (max-width: 959px)這些code真的是又臭又長,每一個div或block都要下三到四次了話,也真的挺麻煩的

2.當我想要更改 media queries 裡的最大或最小寬度時,是一件非常要命的事

第三種方法:使用sass變數和mixin

//先針對media queries的width設為變數

$pc-media:960px;
$pcs-media:959px;
$pad-media:760px;
$pads-media:759px;
$phone-media:480px;
$phones-media:479px;

/*把變數帶入mixin中,此mixin只就單純把media queries寫到我的mixin中,
並且使用我上面設立的變數來調動media queries的width*/

//電腦
 @mixin pc-width() {
  @media all and (min-width: $pc-media) {
               @content;
         }
    }
//平板
 @mixin pad-width() {
@media all and (min-width:$pad-media) and (max-width: $pcs-media) {
                @content;
          }
}
//小平板
 @mixin small-pad-width() {
        @media all and (min-width: $phone-media) and (max-width:$pads-media) {
                @content;
          }
 }
//手機
 @mixin phone-width() {
        @media all and (max-width: $phones-media) {
                @content;
          }
 }

//實際引用

.div1{
          //電腦版
         @include pc-width{
                padding:20px;
         }
         //平板
         @include pad-width{
               padding:10px;
          }
         //小平板
         @include small-pad-width{
               padding:5px;
          }
         //手機
         @include phone-width{
               padding:0px;
          }
      }

.div2{
         //電腦版
         @include pc-width{
                margin:20px;
         }
         //平板
         @include pad-width{
               margin:10px;
          }
         //小平板
         @include small-pad-width{
               margin:5px;
          }
         //手機
         @include phone-width{
               margin:0px;
          }
     }  

這種寫法解析出來的code會跟第二種方法一樣,不過他解決了第二種方法產生的兩個問題,不只你不用打又臭又長media queries的code之外,想要更改medua queries的寬度,只需要在變數那邊作更改就可以了!

此mixin延伸使用


//繼續延伸上面的media queries 的mixin code //padding responsive的mixin @mixin responsive-padding($pc,$pad,$small-pad,$phone) { //電腦版 @include pc-width { padding:$pc; } //平板 @include pad-width { padding:$pad; } //小平板 @include small-pad-width { padding:$small-pad; } //手機 @include small-pad-width { padding:$phone; } //margin responsive的mixin @mixin responsive-margin($pc,$pad,$small-pad,$phone){ //電腦版 @include pc-width{ margin:$pc; } //平板 @include pad-width{ margin:$pad; } //小平板 @include small-pad-width{ margin:$small-pad; } //手機 @include small-pad-width{ margin:$phone; } div1{ //@include responsive-padding(電腦,平板,小平板,手機) 帶入4個padding的值 @include responsive-padding(20px,10px,5px,0px); } div2{ //@include responsive-margin(電腦,平板,小平板,手機) 帶入4個margin的值 @include responsive-margin(20px,10px,5px,0px); }

結論

運用SASS的mixin延伸寫出專給responsive使用的padding和margin的mixin,解析出來的code也分第二或第三種方法一模一樣,同樣的方式也可以對其他的css屬性來使用,可使開發和後續維護更方便也更精簡,供大家參考。