iT邦幫忙

DAY 27
1

Sass3.3 & CSS設計模式系列 第 28

Sass教學 (27) - 如何使用Sass來管理你的Bootstrap


影片教學請點選下圖連結↓

以下文章同步於Github

範例程式碼

Github 範例程式碼

學習目標
1.了解Bootstrap Sass結構
2.能夠透過Sass變數來統一管理Bootstrap的樣式設定
3.新增一組新的按鈕樣式

進入主題
Bootstrap的Sass架構如下,
你也可以到此連結瀏覽詳細架構

|- _bootstrap.scss
|- bootstrap資料夾
    |- _variables.scss
    |- _mixins.scss
    |- Mixin資料夾
        |- _button.scss
        |- _其他元件.scss

我們從上往下瀏覽下來,
根目錄的_bootstrap.scss自然是載入所有的子檔案Bootstrap用的,
裡面載入的先後順序則是:

1.變數
2.Mixin
3.CSS Reset
4.核心CSS(按鈕、表格、表單、格線系統)
5.組件(下拉選單、頁碼表、麵包屑、navbar、按鈕群組)
6.JS組件
7.公用(clearfix、text-hide、RWD)

變數
Bootstrap所有的設定都可以透過Boostratp的_variables.scss來設定,
Bootstrap的顏色設定則是先設定了一組顏色變數,
要使用時,則再透過語意化命名來提取它,例如像這樣子:

$brand-primary:         #428bca !default;
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;

//** Global textual link color.
$link-color:            $brand-primary !default;

上面五個就是Bootstrap的預設五種顏色色系,
像譬如說,我今天希望我所有網頁上的網頁連結都要變成是$brand-primary的顏色時,
我就抽象命名一個$link-color的方式,將顏色變數帶進去,
這樣有助於我們在閱讀時,可以透過變數命名來知道他的用處,

Bootstrap的核心CSS都有繼承預設色系,
你可以試著將顏色變數修改就會發現,
所有的核心CSS與各個組件的色系也跟著修改了,
再加上Bootstrap的每個細節都有用變數來統一管理,
想要客製化自己所要的theme自然得心應手。

如何新增一組新的按鈕樣式
你會發現Bootstrao就只有五種的主要顏色色系,
但如果今天你的網站需要更多種的按鈕樣式時,
如何透過它的結構來新增樣式呢?
這時就必須要先了解他的設計模式,

首先來講他的設計核心CSS的流程,
這裡自然以按鈕來當範例,

流程一 建立按鈕變數
在_variables.scss透過全域顏色變數新增各按鈕變數:

$brand-primary:         #428bca !default;
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;

$btn-primary-color:              #fff !default; //按鈕文字顏色
$btn-primary-bg:                 $brand-primary !default; //按鈕背景顏色
$btn-primary-border:             darken($btn-primary-bg, 5%) !default; //按鈕border顏色

流程二 設定按鈕mixin與輸出class
再來Bootstrao會有兩個_button.scss,
一個是拿來處理button mixin用的,
另一個則就是拿來輸出class用,裡面各個按鈕class自然有用到mixin設定。
如下程式碼:

//mixin資料夾裡面的 _button.scss
@mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: darken($background, 10%);
        border-color: darken($border, 12%);
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: $background;
          border-color: $border;
    }
  }

  .badge {
    color: $background;
    background-color: $color;
  }
}
//輸出class用的 _button.scss
.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

Bootstrap所有的核心CSS都是類似這樣的建立流程,
表單、表格、格線、按鈕等等都是會有一個檔案拿來輸入class,另一個是設定Mixin。

這樣你就可以知道,
如果你要新增一組按鈕樣式,
也是比照這樣的流程辦理,
假設我要建立一個紫色的按鈕,
流程就是:

//_variables.scss  新增全域顏色變數、按鈕變數
$brand-primary:         #428bca !default;
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;

$brand-pink:         pink !default;
$btn-pink-color:              #fff !default; //按鈕文字顏色
$btn-pink-bg:                 $brand-pink !default; //按鈕背景顏色
$btn-pink-border:             darken($btn-primary-bg, 5%) !default; //按鈕border顏色

// bootstrap / _buttons.scss 新增一個按鈕class,再把變數套上去
.btn-pink {
  @include button-variant($btn-pink-color, $btn-pink-bg, $btn-pink-border);
}

如果你要偷懶點的作法,直接在.btn-pink的mixin上面依序添入文字顏色、背景顏色、border顏色的色碼也可以,詳細的開發流程我也有錄影,可以再比對參考。

總結
Bootstrap的Sass結構真的不錯,
相當建議各位弄懂它的設計手法,
保證讓你的Sass規劃功力大增!


上一篇
Sass教學 (26) - 使用animate.scss增強網頁瀏覽體驗
下一篇
Sass教學 (28) - @each+Sass Maps批次新增各元素樣式
系列文
Sass3.3 & CSS設計模式46

尚未有邦友留言

立即登入留言