iT邦幫忙

DAY 20
2

30天掌握Sass語法系列 第 16

30天掌握Sass語法 - (20) 利用@Mixin與Sass運算建立Grid System

  • 分享至 

  • xImage
  •  

雖然說如果你的網頁設計有符合960grid或其他grid system的話,
做網頁就相對方便許多,
但如果美術設計對grid system觀念不是很熟,
或者不習慣這樣設計網頁時,
也就只能收到版後,再自己手刻版型欄寬,

所以這裡就分享一個我自己設計的Sass @mixin,

在一般電子商務上面,
常常會看到一些商品排排陳列在網頁上,

像譬如誠品書局:

又或者是Lativ,

我們特別來看Lative的設計,
她在li上面設了margin-right:40px讓產品都有間距,
但你可能會想說,
這樣不就變成最後一個也會有margin-right的留白,
這樣感覺不就不一致了嗎?
實際上並不是這樣子的,
他在li上面又設置了這樣的語法:

li:nth-child(4n){
  margin-right:0px;
}

這是CSS3的選擇器的寫法,
意思是當我li每到第四的倍數時,
就將該li的margin-right變成0px,
這樣就可以做到左右對齊的排版出來了,
那如果是用Sass的話,
我自己會這樣子去撰寫:

$width:960px
.wrap
  width:$width
  margin: 0 auto
           //  欄位數量    ,   欄位間距
@mixin grid($cloum_number,$cloum_gutter)
        //總寬度 -    欄位間距  *    (欄位數量-1)      /   欄位數量
  width: ($width - $cloum_gutter*($cloum_number - 1) ) / $cloum_number
  margin-right: $cloum_gutter
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box
              //   欄位數量
  &:nth-child(#{$cloum_number}n)
    margin-right: 0

.product li
  +grid(3,30px)

而產生出來的CSS code,
就會長成這樣:

.wrap{
  width: 960px;
  margin: 0 auo;
}
.product li {
  width: 300px;
  margin-right: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  margin-bottom: 30px;
  border: 3px solid gray;
  float: left;
  padding: 30px;
}
.product li:nth-child(3n) {
  margin-right: 0;
}

由於欄位間距的數量會比欄位數量少一,
所以先將總寬度扣掉所有欄位間距加總起來後,
再除以欄位數量,就會是一個li的寬度了。

box-sizing:border-box則是為了該li不會為了padding與border影響整體寬度,
所以才設置此語法,
有興趣了解此知識的可以瀏覽下述連結:
http://blog.darkthread.net/post-2013-08-11-css-boxsizing.aspx
http://rettamkrad.blogspot.tw/2012/11/setting-correct-width-and-height-for.html
最後面加上了 &:nth-child,
&就會自動繼承前面的class來去延伸,
綜合出來就可以做出一個不管欄位數量與欄位間距px數是多少,
都能友善處理的Sass @Mixin了,
以後你要用到的地方就寫個 +grid(欄位數量,欄位間距),
就可以輕輕鬆鬆加上欄位數量與間距像素就可以一鍵產生出來,
是不是很方便呢?

多善用Sass @Mixin,讓你遠離計算機的算數地獄XDD
這裡也提供影片流程讓各位參考學習:
Yes


上一篇
30天掌握Sass語法 - (19) Sass @Mixin and Compass結合運用範例
下一篇
30天掌握Sass語法 - (21) Sass常見編譯錯誤介紹
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言