CSSのメタ言語について簡単に調べたのでまとめてみました。

例えば？

次の４つのメタ言語が検索で出てきました。GitHubでは、Less, Sass, Stylus, Hssの順でStarされているようです。Google Trendsでも調べてみたのですが同じ順検索されているようです。

Less - Github 14,408 Stars
Sass - Github 9,240 Stars
Stylus - Github 7,774 Stars
Hss - Github 15 Stars

違いは？

個人的に気になった違いのみです。少なすぎますね...詳細は、公式HPやGithubをお願いします。Hssはあまり利用されていないようなので割愛します。

	Less	Sass / SCSS	Stylus
クライアント上でCSSへ変換	○	× / ×	×
インデント記法	×	○ / ×	○

Less

クライアント上でもCSSへ変換できるところが他の２つとの大きな違い。事前にサーバ上で変換を忘れて古いままのCSSを配布してるなんてことがなくなるのかな...一方で、中括弧やセミコロンの省略ができない。この省略できないのは個人的に痒いところです。また、サンプルコードを見る限り文法のラーニングコストが一番高そうかなと思います。しかし、Google TrendsとGithub上ではLessが一番なので、注目度が一番高いのは間違いなしですね。

Sass / SCSS

Ruby on RailsではデフォルトでSassが設定されています。Lessと比較すると文法が分かりやすく、私はとっつき易さを感じました。Github上では、Stylusより少しStar数が多い感じです。SCSSは、2010年Sass3から新たに採用された記法です。SCSSではインデント記法が廃止されCSS3互換文法になりました。

Stylus

LessとSassより後発です。Nodejs製で、ExpressやPugと同じ人が開発したようで、それらと親和性高く設計されているのではないでしょうか。そのため、Nodejs+Express+Pug+Stylusの組み合わせで開発すると幸せになるのかもしれません。気になるのは、Less、Saas、Stylusという順の中で、今後どうなっていくかということです。Google Trendsでもあまり検索されていないようですし...

参考