LESSを使ってbootstrapをもっとデザインしてみた
またまた、twitterbootstrapネタです。
twitterbootstrapはデザイン初心者でも簡単にそれらしいデザインのものをつくれてしまうという賜物です。しかし、標準装備だけだとどうしても限界があります。bootstrap自体はCSSなのでベタで書き換えてもいいのですが、あまりかっこ良くないし、コードが長くなってしまい、可読性が落ちてしまいます。
そこで、もっと自由度を広げてくれるのが「LESS」です。
LESSとは
LESSはCSS拡張メタ言語です。LESSを使うことによってコードが複雑になることを抑え、かつ簡単にデザインすることができます。
コードの書き方はほとんどCSSと変わりませんが、変数などの概念が入ってきます。では、以下のような手順で実際にLESSを使ってデザインしていこうと思います。
- LESSの導入方法
- LESSのコンパイラ環境を整える
- LESSファイルの編集
- 確認
ちなみに、bootstrapのCSSファイルはLESSによって自動生成されています。
LESSの導入方法
それでは早速、LESSを導入して以下の写真のようなサイトに色をつけていこうとおもいます。
- こちらのgitからzipファイルをダウンロードします。
- bootmaster->lessに移動すると以下の写真のようにたくさんのlessファイルがあることを確認できると思います。今回編集するのはjumbotron.lessです。
_
LESSのコンパイル環境を整える
LESSはCSS拡張メタ言語なので、LESSファイルをコンパイルしてCSSファイルを生成してあげなければいけません。
- 該当するOSを選択してコンパイラをダウンロードしてください。
MAC OS
Windows - ダウンロードが終了したらコンパイラを起動してください。そうすると以下のようにディレクトリを選択する画面が出てくると思います。
- 先ほどダウンロードしたbootmasterの中のlessディレクトリを選択します。そうすると以下のようになると思います。
LESSファイルの編集
jumbotron.lessの編集
では、まず下の赤枠の部分から編集していこうと思います。背景色がグレーというのはどうにもいただけないので色をかえてみましょう。
- 編集対象LESSファイルを開く
jumbotron.lessファイルを開きます。開くと以下のようなコードが出てきます。ほとんどCSSのコードであることがわかると思います。 - 変数に値を格納する
このままだと、コンパイルをしても変数に値が入ってないと怒られてしまうので変数に値を入れる作業をします。今回はjumbtronの背景色を変え、立て幅もひろげてみます。コードは以下のような感じになります。 - コンパイル
コードの編集が終了したので、コンパイルしてみます。コンパイルの方法は上書き保存をした時点で自動にコンパイルされるはずです。
コンパイルがうまくいくとboot-master->lessディレクトリの中にjumbtron.cssという新しいファイルができるとおもいます。
このファイルをbootstrapが入ってるCSSディレクトリの中に移動すると使えるようになります。 - 確認
使用するに当たって気をつけるべき点
実際に使ってみて、注意点があるのであげていきたいと思います。
- テンプレートファイルの変数には全て値が入ってない
gitからダウンロードしたLESSファイルをみると変数はいたるところに出てるのですが、変数は宣言されてないし、値も代入しなければならないため、自分自身で変数を宣言しなければなりません。
まとめ
LESSを使ってCSSを効率的に作成する手法をやってみました。個人的な意見として、色を変えるくらいの簡単な作業であるならば、直接CSSをいじった方が早いとおもいます。