LESS - Logicky Blog

CSSをシンプルに書くことができるLESS使ってみた Twitter Bootstrapを使ったサイト構築の流れ（後編）

便利だの。twitter bootstrap3というのは、昔のbootstrapと結構違いますね。LESSというのを使っているので、勉強してみようと思いました。LESSというのはCSSの値をパッケージングできまっす。なのでbootstrapのややこしいcssも簡単にカスタマイズできるようになっているのかもしれません。

http://incident57.com/less/

これがMac用のLessコンパイラーというやつらしいです。Lessを作ってコンパイラーでCssにするそうです。twitter bootstrapは全部Lessでcssを管理しており、bootstrapのgithubにそのLessがあります。これをカスタマイズしてコンパイラーでcssにして、bootstrapのcssを入れ替えればいいそうです。

ただ、どうも、上記コンパイラだとエラーが��る。&:extend(.clearfix all)というやつに対応できていないっぽい。有料版の下記だと問題なくコンパイルできました。

http://incident57.com/codekit/

下記のようにネストもできるようです。関数的なこともできるし、計算もできるようです。いいっすね。

@bgcolor: #09c;
@brand_color: red;

div#hoge .hoge table{
    color: black;
    background-color: @bgcolor;

    th{
        color: @brand_color;
    }
}

LESSと同じようなメタ言語として、Sass、Stylusなどがあるらしい。聞いたことはある。