Sassよりラクチン,LESS.appで簡単CSSコンパイル生活!(Mac限定)

LESSとSassを比較していました

ここ半年ぐらいの間に,名前を聞くようになったSassと,それに影響されて作られた後発のLESSを比較検討したところ,以下のような理由からLESSを使うことにしました.

今回は,自分の作業の効率化はもちろん,将来的にチームでシェアできる技術になり得るか,という観点から選択しています.

LESSを選ぶ理由

  • LESS.appというGUIツールが存在する
  • node.jsで動くWebフレームワークExpressがLESSに標準対応している(らしい)
  • 文法がSassより素直&シンプルで慣れてもらいやすそう

この中でも,LESS.appの存在が一番の決め手となって,マイナーなはずのLESSに軍配が上がってしまったので,これを紹介します.

※ごくごく個人的には,expressが対応しているのが一番大きいかもしれないです

決め手はGUIツールであるLESS.appの存在



Mac用しか確認できていませんが,ユーザーフレンドリなGUIツールがあるメリットは,LESSをチームでシェアしたいという目的にとって,非常に大きな意味を持ちます.なんだかんだで,コマンドラインでsass --watch style.scss:style.cssとか打つの大変ですよね.

LESS.appは,パーサーエンジン ( less.js ) も内包しているので,npm install less 等でコマンドラインから何かをインストールしなくてもapp単体で動作する手軽さも魅力です.

ドラッグ&ドロップでLESSファイルを登録するだけ


ファイル・フォルダを適当に放り込めば勝手に認識します.ディレクトリ単位で認識されるみたいです.

使い方を説明したいところですが,すでにまとまっているページがあったので中略.


ファイルの更新にあわせて自動で再コンパイルしてくれる


"Automatically comile files when saved"オプションにチェックを付ければ,lessファイルに変更があったときに自動検知してCSSファイルを再生成してくれます.毎回コンパイルする必要はありません.


LESSもSassも機能や構文は似通っている

変数の表記が,LESSが@varなのに対してSassが$varだとか.MixinするときにLESSは明示しないけど,は@mixinという宣言が必要だとか,些細な違いはありますが,普通に使い回す範囲で,実装されている構文はほとんど同じようです.

蛇足:Sassはプロパティ名に変数を挿入できる

1点だけ使い勝手に影響しそうな違いとしては,Sassはプロパティ名にも変数を利用できますが,LESSはそれができないようです.(たぶん)

/* SassのInterpolationの項から引用しています */

/* style.scss:コンパイル前 */

$side: top;
$radius: 10px;

.rounded- {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}


/* style.css:コンパイル後 */

.rounded-top {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

Sassの場合,上記のように #{$var} の書式でプロパティ名の側にも,変数を組み込んで表現することができます.

これをMixin時の引数と組み合わせると,LESSよりも更にプログラムっぽく書けるような気もしますが,なくても何とかなりそうなので,GUIツールと天秤にかけて落としました.


LESSで物足りなくなったらSassでいい?

Sassのほうが開発的にも醸成されている分,機能・実装的に豪華主義というか,LESSよりもプログラムに寄って複雑に組める印象を受けます.

となるとむしろ,機能がすっきりしていて,MacのGUIツールがあるLESSのほうがCSSコンパイル入門編としては,ちょうど良いのではないでしょうか.

前述の通り,両者の間で構文・機能については大きな差違はありません.そのため,後からSASSを学習することになったとしても,その移行コストは限りなく低いのではないでしょうか.

※ほら,なんとうか,自分がLESSを社内で布教したとして,誰かが余所でSassに出会ったとき「あんなマイナーなもん使わせやがって!」と陰口いわれない安心ってやつです.Sassと比べればマイナーはマイナーですが,学習コストが無駄になることは無いですよ,ってことで.

っていうか

前はLESSもruby実装で,gem install lessだったような気がするのに,いつのまにかnode.js的にnpm install lessになっている不思議.

参考