iT邦幫忙

DAY 17
2

30天掌握Sass語法系列 第 13

30天掌握Sass語法 - (17)使用@content建構RWD網頁設計

esponsive Web Design(RWD) 又稱為響應式網頁設計,
它可以因應網頁解析度上的不同,
進而改變網頁上的樣式,
如果你不了解什麼是RWD的話,
那建議您先閱讀下列文章:
Responsive Web Design 簡單介紹與優缺點、實作入門:
http://fundesigner.net/responsive-web-design-explain/

CSS Media Queries 介紹與基礎應用:
http://www.mukispace.com/css-media-queries-introduce-basic/

那麼回歸到主題,
Sass+Compass該如何設計,
才可有效提升撰寫效率呢?

在以前我第一次撰寫的時候,
是這樣去分割檔案的,

@import reset
@import layout
@import module
@import browser

我的RWD程式碼都寫在最尾端,
所以_borwser.sass放在最後面,
有人就會開始覺得說,
那這樣要開檔案開來開去不是很麻煩?
對我來說是還ok,
因為我用sublime編輯器時,
視窗是長這樣子的:

左邊我先針對區塊元素設定CSS,
當我要針對區塊元素寫RWD時,
就瀏覽右邊的視窗來同步撰寫,
這樣就不會必須用滾輪滑上滑下,
或者必須一直切換檔案寫CODE。

如果你要將sublime切兩個視窗的話,
就按『Alt+Shift+2』,三個後面就改3即可。

除了這個傳統的方法外,
Sass也可以透過if的方式來撰寫RWD,
相關範例如下:

//		  mixin變數
@mixin breakpoint($point)
//判斷變數是pc、pad還是mobile,再依照判斷出來的載入對應的media query
  @if $point == pc
    @media only screen and (max-width: 1024px)
      @content 
  @else if $point == pad 
    @media only screen and (max-width: 768px)  
      @content 
  @else if $point == mobile 
    @media only screen and (max-width: 320px)   
      @content 
.one
  width: 600px
    @include breakpoint(pc)
      width: 300px
      height: 50px
    @include breakpoint(pad)
      width: 100%

產生出來的CSS則就如下:

.one {
  width: 600px;
}
@media only screen and (max-width: 1024px) {
  .one {
    width: 300px;
    height: 50px
  }
}
@media only screen and (max-width: 768px) {
  .one {
    width: 100%;
  }
}

這兩個撰寫方式各有優缺,
Sass提供的@content,
可以就直接在class下面直接寫media query,
可讀性相對上比較高,

但如果是向前面直切割出一個browser的sass檔案統一撰寫的話,
雖然可讀性不好,
但程式碼比較小,
因為是統一在一個media裡面去集中所有樣式,
而不像@content那樣,
每次引用就會又多了一行@media only screen and..巴拉巴拉的語法,
相對來說程式碼自然大得多。

這個問題也曾經在國內網頁設計師論壇討論過,
目前也仍然無最佳的解法,
所以就端看各位來抉擇使用哪種方法。

這裡也錄製影片重頭跑一次流程,
讓大家瀏覽這兩個做法的差異性,
提供各位參考學習:D


上一篇
30天掌握Sass語法 - (12)以Bootstrap framework淺談HTML、SASS設計模式
下一篇
30天掌握Sass語法 - (18)規劃你的Sass結構
系列文
30天掌握Sass語法41

1 則留言

我要留言

立即登入留言