Bootstrap 3をWebページ制作環境にしよう(3) LESSファイルでのカスタマイズ

えらく前になりましたが、前回のGruntでのwatchとlivereload環境設定ができましたら、最後に書いてあるように、トップディレクトリでgrunt watchreloadを実行し、ブラウザ側の拡張機能をonにして、livereloadが実行されるようにしておきましょう。

今回は、スタイルのカスタマイズにCSSを編集するのではなく、LESSを編集して効率的にやりましょう、という話です。LESSでは変数や関数、mixinなどの機能が使えます。Bootstrap3でもそれらを活用してLESSからCSSを生成していますので、利用者もそれに乗っかってやれば、CSSを直接編集するのに比較して効率的に作業ができちゃいます。

LESSファイルの場所

トップディレクトリ配下のlessディレクトリ配下にあります。

たくさんあって面食らうと思いますが、それらをざっくり解説します。

Bootstrap3 LESSファイルの解説

bootstrap.less

BootstrapにおけるLESSファイルの親玉です。LESSでは他のLESSファイルを読み込むことができますのが、ここではその機能を使い、色々なLESSファイルを読み込む記述をしています。これがCSSに変換されると、bootstrap(.min).cssになります。

もし使いたくない機能があれば、そｎ読み込み部分を削除してあげればOKです。

theme.less

Bootstrap3ではフラットデザインにしたくない人向けにbootstrap-theme.cssというスタイルシートを用意していますが、その変換元です。

variable.less

各種変数をここで定義しています。Bootstrap3のカスタマイズサービスで変更可能な変数は大抵ここにあります。このファイルを変更しながら作業するほうがすぐに反映結果を確認することができ、効率的ですね。おそらく、一番変更することになるでしょう。

中の変数については、変数名でなんとなく想像がつくでしょう、ということで割愛します。

mixin.less

clearfixやCSS3機能のベンダプレフィックス付与mixinが定義されています。ここは変更するというよりも、どのようなmixinが定義されているか確認して、余裕があればそれを利用する感じでしょうか。

残りはざっくりとした解説です。

スタイルのベースとなるLESSファイル

• grid.less グリッドの定義
• normalize.less normalize.css のLESS版
• print.less 印刷用スタイル
• scaffolding.less スキャフォルド
• type.less タイポグラフィ

部品定義のLESS

名前でわかると思います。

• alerts.less
• badges.less
• breadcrumbs.less
• button-groups.less
• buttons.less
• carousel.less
• close.less
• code.less
• dropdowns.less
• forms.less
• glyphicons.less
• input-groups.less
• jumbotron.less
• labels.less
• list-group.less
• media.less
• modals.less
• navbar.less
• navs.less
• pager.less
• pagination.less
• panels.less
• popovers.less
• progress-bars.less
• responsive-utilities.less
• tables.less
• thumbnails.less
• tooltip.less
• wells.less

その他

• component-animations.less フェードアウトなどアニメーションの定義
• utilities.less ユーティリティクラス

変更のポイント

まずはvariable.lessを変更して、LESSそのものやBootstrap3でのLESSファイルの構成に慣れてきたらスタイルのベースとなっているものに手を出していく感じになるかと思います。

ということで、このシリーズはひとまずこれで終わり、ということで。