kei3.jp | head -n 10 diary

TwitterのBootstrapで使われていたLESSですが、気になっていたので試してみました。LESS自体は何処かで誰かが話題にしていたような気がするので何となく知ってましたが、使うのは初めて。

まず、Bootstrapのサイトで紹介しているように、HTMLの中に、LESSファイルを読み込むJavascript(less-1.1.3.min.js)を使って、Bootstrapを使う事も出来ます。しかし、この方法。Dreamweaverを使っている場合は非常に不便。Javascriptで動的にスタイルシートを生成しているので、デザインビューでは当然表示されませんし、何故かライブビューでも表示されません。DreamweaverのライブビューはWebKitじゃないのか？それ以前に、動的にスタイルシートを生成している為、Dreamweaverでスタイルシートを一切認識しない形になります。パネルにも出ないし、プロパティでスタイルを選ぼうとしても選べません。デザインタイムスタイルシートに設定すればとか思いましたが、だったら動的に読み込む意味もない。どうやらこの方法、自分にはどの様なケースで使えば良いのか分かりません。テキストエディターで直接ウェブページを作っているような場合には、スタイルシートの管理がし易いので、メリットがあるのかも。

では、Dreamweaverを使っている身として、LESSをどう使えば良いのか。結論から言えば、LESSでスタイルシートを管理して、すぐさまCSSファイルを書き出してしまう。これかな。LESSの場合、提供する定義を階層的に管理したり、変数など色々な便利な記述が出来るので、お決まりのレイアウトなどがあり、それを元に、色を変更して使い回すなどは可成り便利そうな気がします。Bootstrapの場合も、同様に色の指定を変更したり、コラム数や溝の幅などを変更して、自分用のCSSを生成する事も出来ます。

例えば、LESSのサイトに書かれてあるコレ↓。

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
@val: @x @y @blur rgba(0, 0, 0, @alpha);

box-shadow: @val;
-webkit-box-shadow: @val;
-moz-box-shadow: @val;
}
.box { @base: #f938ab;
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0, 0, 5px, 0.4) }
}

CSSファイルの書き出しを行うとこんな感じに成ります。

.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

ベースの色に対して、パーセント指定で変化させて色を自動生成する場合、ルールを書けば自動的に変換してくれるので、便利そうです。何処まで複雑な処理が出来るのか分かりませんが、背景色を指定したら、コントラストが一定以上の色になるような設定に自動的に出来れば、色に悩んでしまう場合、参考になるかも知れません。

このLESSですが、書き出し用のコマンドが有るのですが、Mac用のGUIアプリもありました。LESSファイルを追加して、コンパイルするだけ。但し、Bootstrapの場合、bootstrap.lessを追加しても同一フォルダーの他のLESSファイルも追加されてしまい、そのままコンパイルするとエラーになります。bootstrap.less以外のチェックボックスは外してコンパイルするとエラーが出ません。

LESS << The Dynamic Stylesheet language
>>関連リンク

LESS.app For Mac OS X
>>関連リンク

Bootstrap, from Twitter
>>関連リンク