使用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屬性來使用，可使開發和後續維護更方便也更精簡，供大家參考。