Twitter Bootstrap便利ですよねー 細かいところいちいち調整しなくて済む (:hoverとか)
色の変更や大雑把な要素の変更程度なら公式のCustomize variablesや他のGenerator(StyleBootstrap.info)でも十分だが、それ以上の細かいカスタマイズはできない。結局自分でCSSいじるしかない。
しかしBootstrapはOOCSS(Object-Oriented CSS)な記述がされているので、1ヶ所変更するために、複数個所を書き換える必要があったり、はてしなく面倒くさい。(参考)
まぁ要素ごとに独自クラス作成して上書きしてもいいんですが、OOCSSの考えからは離れてしまう。
そこでCSS拡張メタ言語。LESSとかSCSS(Sass)が有名である。SCSSはRuby, LESSはJavascriptで利用できるようだ。Rubyは使ったことがないので Ruby on Railsの構築から始めないといけない。今はその時ではない…。
参考：CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 – (DxD)∞
Twitter BootstrapもLESSによって構築されているようなので今回はLESSを利用してみた。なのでメモ書きを残してみる
素材集め
bootstrap LESS
twitter/bootstrap · GitHub
Twitter Bootstrapのサイトから普通にダウンロードしたものには最少構成のCSS,img,jsファイルしかなく、LESSファイルは含まれていないので、GitHubの方からLESSファイル込みの物を入手。これを書いている時点ではver 2.1.1だが、このバージョンにはnavbarのdropdownのoverflowにバグがあるので、開発中の2.1.2-wipを利用した。
less.js
LESS « The Dynamic Stylesheet language
LESSファイルをそのままではブラウザは処理できないので、less.jsを入手して組み込む。現時点での最新は ver.1.3.0
とりあえず開発するだけならこの2つを組み込むだけでOK
HTML Head内に組み込み
こんな感じに組み込む。LESSファイルの後にless.jsを読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>hogehoge</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet/less" href="dev/less/bootstrap.less">
<script src="dev/less-1.3.0.min.js"></script>
</head>
<body>
.
.
.
あとは、bootstrap.lessを書き換えていくのだが・・・
実際にいじっていく前に
実際のLESSの記述方法は LESS公式サイト や その日本語訳サイトで勉強してもらうとして
Variable.lessを書き換えるだけでも大体の見た目の変更は可能だ。だがVariable.lessを編集するだけでは公式のカスタマイズとほぼ同じことしかできない。それ以上のカスタマイズをやるなら各Lessを書き換えなくてはならない。
bootstrap.lessを見てみると他のLESSファイルをimportしているのがわかる。
ファイル名からある程度役割が推測できるため、どのファイルを編集すればいいか迷うことは少ないだろう。
私は各LESSファイルを直接書き換えているが、新しくLESSファイルを作りそこにオーバーライドさせるCSSを記入してbootstrap.lessの最後でimportする方法もある。
どちらがいいかは各人の判断によって変わってきそう。
LESSファイルを直接編集するとbootstrapがverupしたときに差し替えが面倒ではある。(まぁ各ファイル大したコード量ではないため差分比較して修正すればいいし、そもそも差し替えなどしない選択肢もある)
直接編集する方が後々コンパイルして生成されるCSSがきれいだと感じるので、直接書き換えをしている。
Twitter Bootstrapはresponsiveデザインにも対応している。が、responsive対応しつつデザインいじろうとするといくつかエントリが書けそうなぐらい難易度が上がる。(たぶん後で別記事書くかも)
LESSファイルはテキストファイルなので、UTF-8でBOMなしファイルを扱えるエディタならなんでもいいのだが、強調表示させる場合は各IDEでLESSを強引にCSSと認識させるか、LESS用のプラグインを導入しなくてはならない。
LessCSS Module – NetBeans Plugin detail
Eclipse plugin for LESS
IDEを使ってない場合は AdobeAIRアプリの Crunch!も良いかもしれない。 Crunch! – The tastiest LESS editor
less.jsの弱点？
bootstrap.lessから読み込まれている各lessファイルを編集した場合、bootstrap.lessを再度上書き保存しないと見た目が反映されないっぽい
たとえば、hero-unit.lessを更新して、bootstrap.lessに一切タッチしていなくても、hero-unit.lessを保存したらbootstrap.lessも保存操作が必要
ちょっと気づくのに時間がかかり悩んでしまった。
そして、lessファイルとless.jsのままだとLESSファイルの@importが何回も発生する。さらにless.jsがクライアントサイドでLESSファイルをコンパイルしているためサイト表示が遅くなる。
開発時はいいのだが、リリース時は表示高速化のためにもカスタマイズしたLESSファイルからCSSを生成して、それをリリース時には参照させるようにしよう。
LESSファイルをコンパイルしてCSSファイルを作成
LESSのlesscをWindows環境で使う話 : 傾き指向プログラミング を参考にさせていただきました。
必要なもの
node.js
Windows環境下で今回だけnode.jsを使うので、node.jsのDownloadからWindows Binary (.exe)を入手した
cloudhead/less.js · GitHub
less.jsのgithubからbinディレクトリのlesscファイルと libディレクトリ以下を取得
出力用batファイルの作成
lessc.batの記述
@"%~dp0\bin\node.exe" "%~dp0\bin\lessc" %*
ファイル階層
dev/
├── lessc.bat
├── bin/
│ ├── lessc
│ └── node.exe
├── lib/
│ └── less/
│ ├── tree/
│ ├── browser.js
│ ├── colors.js
│ ...
└── less/
├── accordion.less
├── alerts.less
├── bootstrap.less
...
コマンドラインから
lessc less/bootstrap.less bootstrap.css
さいごに
LESSを利用することでCSSのデザイン作業はかなり楽にはなるが、カスタマイズする場合にはある程度CSSが理解できている必要がある。
まだCSS理解できてないけどデザインはしないといけない って人のためにももっとカスタマイズ/ジェネレーターツールが発展していくといいな
