bootstrap

Twitter bootstrapをsassでカスタマイズ。

2014.6.3

便利なBootstrapをsassでカスタマイズしたのでその記録。

githubで作ってくれている人がいる。流石！

https://github.com/alademann/sass-bootstrap

まずはインストール。 

	$ bower install sass-bootstrap-compass

 

ダウンロードされたsass-bootstrap-compass/には、examples/が入っている。

このうち適当なものを複製して使っていく。

同じくsass-bootstrap-compass/に、sass-bootstrap-dist.zipがある。

js,imgを使うので解凍し、dist/へ突っ込む。

 

※ここはcssのカスタマイズのログになります。

bootstrapのsassの構成 sass-bootstrap.scss が各モジュール専用のscssファイルをimportしているよう。

ここで必要・不要なものの調整が出来ますね。

  

// Compass utilities
@import "compass";

// Core variables and mixins
@import "variables";
@import "mixins";

// Reset
@import "normalize";
@import "print";

// Core CSS
@import "scaffolding";
@import "type";
@import "code";
...

色の変更 インクルードされているファイルの、_variables.scssで変更が出来そう。

例えば.navbar-inverseがデフォルトでは#222222なのでこれを変えたい場合、_variables.scssで"navbar-inverse"を探してやればOK。

※変数がわからなければ_navbar.scssを探すなど

BLOG TOP