4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass

そんなSassが町田先生のCustomizedTwitterBootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。

ソース

こちらが良い感じにしてくれるベースの変数です。

$base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。

実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。

//---------------------------------------------------------
// Color Scheme for Bootstrap
@import colors/try
@import color_variables

//---------------------------------------------------------
// Imports
@import bootstrap

そうするとこんな感じのゆるふわな色合いになります。

yurufuwa

_variables.sassでカバーしている変数が足りていないので、ちょっとしたところで配色の不整合が起こる可能性がありますが、もくもくと成長させて行きたいと思います。ゆくゆくはGemに。

色のネタに困ったらCOLOURloversやAdobe Kulerから探すのが良いと思います。