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でもあまり検索されていないようですし...