Blogブログ

Category: scss

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

便利な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を探すなど