Sassよりラクチン,LESS.appで簡単CSSコンパイル生活!(Mac限定)
Posted: Updated:
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になっている不思議.