LESSじゃなくてSASSを使った方が良いな気がしてきたからSASSにします

2012年08月29日

sass

CSS拡張のツールであるLESSとSASSはどちらの方が良いか、というのはよく議論の対象になっている気がしなくもないのですが、実際のところどうなんだろうね、とちゃんと考えたのでその考えをまとめてみます。

僕はCSS拡張の存在を知ってから、最初はSASSではなくLESSを使う選択をしました。なので2012年8月現在のこのブログのスタイル作成にはLESSを使用しています。

LESSは環境を整える必要がなくて便利なので「Rubyいれるとかめんどくせ」って思ってた僕にとっては便利なCSS拡張だったのですが、その後いろいろと調べたり聞いたりしているうちにSASSの方が長く使えそうだなぁと思い直しましたので、最近はSASSで書くことの方が多いです。しかし2012年8月現在このブログのスタイル作成にはLESSを使用しています。

LESSの良さ

以前「SS | はじめの一歩!CSSをもっと便利に書けるLESSとは」というLESSについての記事を書いたことがあるのですが、この時はCSSと比べた時のメリットだけだったのですので、今日はそれ以外の「SASSではなくLESSを使用するメリット」を書こうと思います。

LESSを使用するメリット

環境を整える必要がない

これに尽きます。ノンプログラマでも安心のLESSです。普通にCSSを書いて、必要なところだけ拡張すれば良いんです。たとえば、とりあえず普通にCSSをかいていき、「あ、ここのスタイルは多分他でも使うな」って箇所が見つかったらその部分だけコピーしてファイルの最初の方にクラスとして書き出せば良いんです。もうhtmlに <div class=”clearfix”> とか指定しなくていいんです。簡単です。

LESSの良くないところはJSを使うところ

ただし、LESSってのはその思想上、基本的にJSでCSSをコンパイルする生き物です。今も昔も高速化高速化と言われているこの業界でJSを使わない選択肢が用意されているのにもかかわらずわざわざ使用するのは怠慢ではないか、と思うわけです。

JSがヤならコンパイルすれば?

ただ、LESSはJSで動くとはいえ、コンパイルできない訳ではありません。早とちりはいかんよ君ぃ。コンパイルくらい僕だってできるんだよ。コンパイルするアプリもいっぱい(かどうかは知りませんが)ありますしね。

ただ、どっちにしろコンパイルするんだったら別にLESSの方が良い理由にはならなくね?と思うわけですね。LESSの良さはhtmlとCSSみたいな、「書いてぽんとブラウザに渡せば表示される」手軽さにあるわけですよ。

SASSの方が良いことは?

そういうあまりアクティブではない理由で僕はSASSを使いだした訳ですが、使ってみるとLESSよりもやれることが多くて素敵ですね。

  • スタイルの継承が可能
  • パフォーマンス

もしかしたら今はLESSも色々できることは増えてるのかもしれないですが、とりあえず僕が知ってるのはこれくらいです。そしてこれくらいではあるんですがこれが重要だと僕は思うわけです。

スタイルの継承

SASSだとExtendという機能が使えます。おおむねMixinみたいな感じで「特定のスタイルを汎用的に使えるようにする」仕組みなんですが、MixinとはCSSでの吐き出され方が違います。

違いがお分かりいただけましたか?mixinはあくまで「所定のセレクタに対して特定のスタイルの塊をセットする」という仕組みで、extendは「いろんなセレクタで使われている同一のスタイルはひとまとまりにして、差異のある箇所だけ個別に指定しよう」という使い方です。

僕はextendの方がCSSっぽいからこちらをよく使ってます。これが使えるのが良いよね、と思ってます。

パフォーマンス

SASSは@importを使用して、コンパイル後のファイルを1つに纏めることができます。

@import自体はLESSでもできるはずですが、LESSはコンパイルしないというその性質上、結局はサーバがファイルを読み込む数が1つにはなりません。つまりhttpアクセスは多いまま。これはあんまり意味ないよね。それにさっき言いましたが、JSでの動的コンパイルはcssファイルのみと比べたら遅いのは目に見えてますし。

LESSはいらない子?いいえ違います

ただ、じゃあLESSはいらない子なのかと言うとそんなことはありません。お手軽にできてしまいますので、僕は最近簡易なワイヤーフレームを作る際はhtmlで作っちゃえばいいじゃんと思い立ったので、ワイヤー用のファイル一式を持ってます。そしてワイヤーを作るたびにコンパイルするファイルを選ぶとかコンパイルアプリを立ち上げるとかあほらしいのでLESSを使ってます。

そういった、用途に合わせて使えばいいんじゃないかと思います。LESSだとCSS拡張とかを知らない人でも普通にCSS感覚と何も変わらずに修正できるしね。

まとめ

とりあえず、そんな理由で僕はSASSを使ってます。そしてこのブログのスタイルはLESSで書かれています。

そんな感じで、LESSもSASSも用途に合わせて色々使い分けるくらいのカジュアルな使い方をすればいいんじゃないかと思いますよ。

他にこんな事も書いてます

FBでコメント

2個のコメント

  1. 書いた:LESSじゃなくてSASSを使った方が良いな気がしてきたからSASSにします – http://t.co/HCMUMdi4

  2. @SIKA_UMA より:

    SS | LESSじゃなくてSASSを使った方が良いな気がしてきたからSASSにします – http://t.co/MGmOLfAA 『httpアクセスは多いまま』 そうそう、これは気になった。分割しようが結局は数いっしょやーん、と。だからこそのキャッシュなのかな。

トラックバック/ピンバックはありません。