CSS lessな開発のススメ

webdesign,css, less

個人的にWeb系の技術で気に入ってることの一つにHTMLとJSとCSSによる、構造、振る舞い、デザインの分離がある。
これはかなり自分の価値観にマッチする。ただ、デザインを担うCSSがPoorすぎるのが問題点。

といっても表現力の話じゃない。CSS3はかなり表現力を持っているし、分厚い仕様書が出来るほどの豊富な機能も持っている。
じゃあ、何が微妙かというと記述力。私みたいなにわかプログラマが自分のサイト用にちょっとデザインを組もうとするとCSSの複雑さに泣きます。というか、変数も使えないので、同じ設定値をコピペしまくるという残念仕様。

というわけで、そこでlessですよ！ 

これは、CSSに構造化や変数など様々な拡張を施した素敵ライブラリ。

下記は本家のサンプル

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

構造化をブロックでも表現できるのでかなりわかりやすい。
また、変数の利用はもちろん、ミックスインという関数ライクな仕様もあるので、部品化がかなりしやすくなります。
とくにミックスインはサンプルにあるように各ブラウザ固有のプロパティを抽象化できるのも魅力 。

使い方は簡単で、下記の感じのヘッダをつければOK.

    <ink rel="stylesheet/less" href="/css/main.less" type="text/css"/>
    <script src="/js/less-1.3.0.js" type="text/javascript"</script>

コマンドでCSSに変換することもできて、そっちが基本的に推奨なんだけど、jsを読み込むことでリアルタイムに変換できるので、少なくとも開発中はこれで問題ないはず。

SCSSとかもほぼ同じコンセプトの仕様ですけど、JSによる変換で手軽に利用できる分今はlessを使用しています。

less + CoffeeScriptがWeb開発のメインストリームになると嬉しいなぁ。

ちなみに、詳しい使い方とかは、下記のサイトを参考にして下さい
http://dxd8.com/archives/217/