スクリーンショット 2013-07-31 20.02.18

今や1年くらいの付き合いになったLESS。LESSとは、CSSのプリプロセッサで従来より簡易的な記述でCSSの記述が可能になるという優れもので、ウェブサイトのマークアップに用いるとサイトを素早く構築できる利点があります。

ほかにも、ソースの可読性が上がったりして凄く便利です。今回は僕お気に入りの、LESS対応のCSSフレームワークをいくつかまとめます。

グリッドシステム

近年のウェブレイアウトに欠かせないグリッドシステム。LESSとの相性もかなりよく、必要に応じてカラム・ガターサイズを調整できたり、マークアップ要素の横幅など算出できる点が柔軟でいいです。最近はレスポンシブに対応したグリッドシステムも多くなってきました。

SemanticGRID SYSTEM

可変・固定レイアウトやレスポンシブ、要素のネスティングなど、幅広いデザインケースを柔軟に対応できるグリッドシステムです。わりと最近よく使います。グリッドオンリーで提供。

スクリーンショット 2013-07-30 20.09.02

 

Fraction.less

最近主流な1140pxGridをベースに作られているマークアップフレームワーク。モダンなHTML5から下はIE6まで互換性があるのも魅力。初期の導入量が多いのでびっくりするんですが、ここまで住み分けられたら理想だなって感じです。LESS初心者は避けたほうがいいかもしれないです。

スクリーンショット 2013-07-30 20.10.55

 

Frameless

HTML5時代のベーシックフレームワーク。思想としてはモダンブラウザ向けにクールなレスポンシブページ作ろうぜ。と、クラッシクなブラウザを無視してスピードやワークフローを重視している感じで好きです。すぐにコーディングに着手できる形で提供されていて、おまけにレイアウトしやすいようにgrid.psdが入っていたりします。

カラムの算出方法と、リセット要素を内包している形が特徴的で勉強になりました。

スクリーンショット 2013-07-30 20.12.24

Mixin定義

LESS関数をまとめたmixin定義です。Mixinを用いると例えば、影やハイライトの状態、フォントサイズなどの繰り返し使うスタイルをひとまとめにでき、無駄な記述を省けたりします。これまたとても便利でかつ、プロジェクトの個性がでるところです。

 

LESS Elements

グラデーションやシャドウ、線などの使用頻度の多いスタイルに関わるものしか定義していないので非常シンプルなMixin定義です。もちろんベンダープレフィックスつき。

スクリーンショット 2013-07-30 20.16.35

 

LESS Prefixer

先ほど紹介したLESS Elementsに足りないアニメーション要素や、CSS3で実装されたCSSなどが加わったMixin定義。トランジションなどの定義方法は参考にしたけど、メインで使うことは…なさそう。

スクリーンショット 2013-07-30 20.17.26

 

lesshat

mixinとしてはかなり理想の状態なlesshat。プレフィックスのオンオフに対応してたりとか柔軟なので、必要に応じて部分的に採用しやすいです。
スクリーンショット 2013-07-30 20.14.57

 

bootstrap/mixin

Bootstrap内で利用してるMixinですね。Mixinのあれやこれやはだいたいここから学びました!(ただし理想的なMixin集ではないと思います)

コンパイラ

LESSは通常ブラウザで解釈出来ない *.less ファイルになるので、CSSに変換する必要があります。特に際立って使いやすいコンパイラはないんですが、だいたいが出力ディレクトリと入力ディレクトリを記録していて、セーブするたびにコンパイルしてくれたり、Minifyしてくれたりします。

 

LESS.app

JSでLESSファイルを読ませて、watchモードというもので動的にプレビューできたりするんですが、コンパイルしてCSSとして読ませたいというかたは、迷わずLESS.app、これ1つあれば十分だとおもいます。Win版も確かあったはず。

A screenshot of the Less.app window


そんな僕はSassに浮気中です。