使用sass定製你的bootstrap css
本篇文章要跟大家分享如何使用sass定製你的bootstrap css。
取得bootstrap sass檔案
首先取得bootstrap sass檔案。你可以：
- 到bootstrap 官網下載bootstrap-sass 檔案並解壓縮下載下來的檔案。(http://getbootstrap.com/getting-started/)
- 到github去克隆bootstrap-sass (https://github.com/twbs/bootstrap-sass)
解壓縮之後的資料夾結構如下：
bootstrap-sass/
├── assets/
│ ├── fonts/
│ ├── images/
│ ├── javascripts/
│ ├── stylesheets/
├── lib/
├── tasks/
├── templates/
├── test/
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
將assets資料夾底下的四個資料夾(fonts, images, javascripts, stylesheets)複製到我們的sass專案資料夾裡。
設定bootstrap sass專案
開啟命令元視窗(DOS小視窗)、進入專案資料夾路徑輸入底下命令。
| compass creat |
移除compass自動產生的sass資料夾、並將stylesheets更名為sass
進入更名後的sass資料夾、移除compass 自動產生的css檔案、將_bootstrap.scss更名為bootstrap.scss。
視需要修改調整config.rb檔案
| http_path = “/"
css_dir = “stylesheets" sass_dir = “sass" images_dir = “images" javascripts_dir = “javascripts" |
開始自訂bootstrap css
開始監控sass
| compass watch |
現在我們可以開始自訂bootstrap css了
測試一下
我們來修改一下bootstrap 的顏色設定：
Bootstrap的顏色、字級、長度等等設定值都放在 _variables.scss 這個檔案裡。
我們要在_variables.scss裡找到brand color並修改這些設定值
| $brand-primary: #76229D;
$brand-success: #2A8D2A; $brand-info: #22539D; $brand-warning: #FF5500; $brand-danger: #FF0060; |
修改之後的結果就像這樣：
我要留言