前回の、Bootstrap3 LESSのカスタマイズ -環境設定編で、Grunt環境構築などの準備をしましたが、今回はカスタマイズする方法について解説します。

Grunt起動

１．ターミナルを開きbootstrapフォルダまで移動

まずは、ターミナルなりコマンドプロンプトを起動して、ダウンロード・解凍したbootstrapの置き場所まで移動してください。
以前、やさしいSassとCompassの導入方法（Windows、Mac）でもコマンドの簡単な使い方を説明しましたが、慣れていない人は、cd␣を入力した後に移動したいフォルダをコマンド画面にドラッグ＆ドロップ＆Enterで楽に移動できます。
※␣は半角スペースです

２．Grunt実行のコマンド入力

その後、

grunt watch

を入力するだけで、Gruntの監視がはじまります。

Waiting…　となれば成功です。
編集ファイルを保存するたびに、compassのように自動でコンパイルしてくれますのでとても楽です。
また、cssなどの記述にエラーがあるとコンパイルされませんのでご注意ください。

終了時は、ctrl+c で終われます。

※黒い画面が苦手な人用にコマンドイメージサービスしておきます

lessファイルの編集

bootstrapフォルダ内のLESSファイルに色々なLESSファイルが格納されています。
すべての説明はしきれないので、簡単に主要部分を説明していきます。
なお、機能については推測部分もありますのでご了承ください。

・variables.less

色々な変数の設定がまとめられているファイルです。
Bootstrapのカスタマイズ画面でできることは、このファイルの指定を編集でいけるはずです。
例えば、フォントがデフォルトの”Helvetica Neue”のままだとHelveticaをインストールしてある、IE9,10で表示できないバグがありますので編集するには、以下のように書き換えます。

//42行目辺り
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
↓
@font-family-sans-serif: Arial, sans-serif;

このように、どんどん変えていってしまってください。
変数は400個以上ありますので、それぞれの役割を説明することはできませんが…大体変数名で推測できるかと思います。

・mixins.less

CSS3のベンダープリフィックスなどの設定がまとめられています。
mixinsとは何ぞやの人は、まず調べていただきたいのですが、簡単に言うと長ったらしい記述指定を短縮した記入ができるような設定をしています。
※もちろんそれ以外のものも書かれています

・bootstrap.less

いろいろなLESSファイルをすべて集約して、bootstrap.css として書きだすためのファイルです。
不要な機能があったら、コメントアウトすれば書きだされくなると思います

例えばモーダルウインドウを使わないときは、下記のようにしてください。

//モーダルウインドウ使わんな
//@import "modals.less";

・theme.less

デフォルトでは、bootstrap-theme.css という独自テーマのスタイル設定ファイルとして書きだされるファイルです。
Bootstrapオリジナルスタイルの上書きや（個人的にあまりやりたくない…）、独自のスタイルなどを記述します。

以上で主要な部分は上記でカバーできているかと思います。
あとは個々で詳細な構造や、LESSの知識を深めるなどしてどんどんカスタマイズしていけば、今までよりも制作が楽になるかもしれないですね。
また、これをきっかけにGruntの使い方をもっと勉強していくのもいいかと思います。

さわりだけの表面的な説明になってしまいましたが、今回はこの辺で失礼いたします。