Sass教學-格線系統

-

格線系統說明：
格線系統一開始是從平面設計衍生出來，目的是為了讓排版版面看起來更為整齊、美觀。而網頁部分則是因為早期電腦螢幕通常都是1024px，故早期設計上都以960px為主。欄數部分以12欄為主流(因為可以切分出較多組公倍數)。
接著我們來看一下網格系統吧! 下面這張圖是sketch 設定畫面
說明：
1.圖片中設定的Total width明明就是960px，但為何實際寬度只有940px呢?
原因出在，此格線系統有一個Gutter on outside(共20px)，而通常這部分都是設定在container上(此案例的話是推padding-left:10px padding-right:10px)
補充：為何要有gutter on outside出現呢?  回答連結
簡單來說就是為了讓畫面不那麼擁擠，可以讓閱聽者閱讀上更加舒適

介紹完格線系統後，接著我們來想想上面的Gutter是怎麼產生呢?
你第一個想到應該會使用padding或margin來推擠吧!沒錯Bootstrap也是由在column上使用padding來推擠  如下圖
但在column上加上padding推擠後會造成畫面往內縮(畫面不一致)，所以還要在row上加上margin將推擠回補
最後在行動版上，若沒有在container上加一層padding推擠會無法產生兩邊相同間距(也會出現X軸可以水平移動) 如下圖   
程式碼：
// container拿掉padding
.container {
  max-width: 960px;
  margin: 0 auto;
  // padding-left: ($gutter-width/2);
  // padding-right: ($gutter-width/2);
}

但，如果補回padding值，左右就會保留一定寬度
// container拿掉padding
.container {
  max-width: 960px;
  margin: 0 auto;
  // padding-left: ($gutter-width/2);
  // padding-right: ($gutter-width/2);
}

  • 了解完Bootsrap網格系統設計方法後，就讓我們開始介紹用模組化來設計網格系統吧!
首先，我們為何要使用模組化呢?(以下方Medium排版來當例子)
Medium上方採用客製化方式規劃網頁布局，而下方則採用模組化方式設計(標準混合式設計方法)

模組化特點：
1.避免命名上問題
2.整體一致性高
3.可重複使用性高
 
缺點：
變化應受限

  • 而Bootstrap使用模組化格線系統優點為：
1.使用Flex
等高、等寬、水平置中
2.穩定性高
3.欄數增加也不會出錯

補充部分
html部分
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
</div>
</body>
Sass部分
.box {
width: 200px;
height: 100px;
float: left;
background-color: bisque;
}

//請留意下方寫法
@for $i from 1 through 5 {
.box#{ $i } {
background-color: darken(white, $i * 15%);
}
}
說明：
1.數字用@for，變數from搭配through：會包含最後一個數字
2. 變數from搭配to 不會包含最後一個數字
3.css命名不能直接加變數，必須使用#{ }

html
<div class="container">
<div class="box box-primary"></div>
<div class="box box-secondary"></div>
<div class="box box-warning"></div>
</div>
Sass
// Sass Map
// 首先先定義變數
$themes:(
// 放入key,value
'primary':blue,
'secondary':green,
'warning': yellow,
);

@each $key, $value in $themes {
.box-#{$key}{
background-color:$value ;
}
}

//如果要單獨取值的話
.box-primary{
// 變數、key
background-color: map-get($themes,'warning');
}

Sass
//%表示可以不用編譯，但可以搭配@extend使用
%col {
position: relative;
min-height: 1px;
max-width: 100%;
flex: 0 0 100%;
padding-left: ($gutter-width/2);
padding-right: ($gutter-width/2);
}

@for $i from 1 through $grid-num {
.col-#{$i} {
@extend %col;
}
}

@media (min-width: 768px) {
@for $i from 1 through $grid-num {
.col-#{$i} {
max-width: 100% * ($i/$grid-num);
flex: 0 0 (100% * ($i/$grid-num));
}
}
}



參考資料：
1.Bootstrap 原始碼

留言

張貼留言