ものすごく今更感が拭えないのですが、これに手を出したら、人間が堕落すると思っていたのでなかなか手を出せずにいたのです。(CSSを忘れてしまうかなという不安が。。)
ですが、手を出してみた感想としては、やはり人間が堕落する以上のものがそこにはありました。
CSS拡張メタ言語ってなに?
メタ言語(またはプリプロセッサ)と呼ばれます。
CSSをベースにした独自の記法でコーディングし、それをコンパイラでCSSに展開するというものです。
「計算したいな」や「変数使えたらな」という願いを叶えてくれます。
よくみかけるのがこの3つかと思います。
言語 | コンパイラ | 拡張子 |
---|---|---|
SCSS (Sass) | Ruby | .sass .scss |
Less | JavaScript(node.js) | .less |
Stylus | JavaScript(node.js) | .styl |
Sass ≠ SCSS
もともとはSassというプロジェクトが存在し、そこから派生したのが SCSSだそうです。
どれから学べばいいのかな?
とてつもなく便利らしいという認識しかなかったのですが、調べてみるうちによく目にしたのが、SCSS (Sass)とLESSでした。
ということで、SCSS (Sass)とLESSの二択に。
SCSS (Sass)とLESS?どう違うの??
比較項目としては以下の3つ。
- 開発環境
- 機能
- 記法
開発環境
項目 | SCSS(Sass) | LESS |
---|---|---|
動作OS | Linux / Mac OS X / Windows等 (Rubyが動作する環境) | サーバーサイド: Linux / Mac OS X等 (「node.js」が動作する環境) |
クライアントサイド: Linux / Mac OS X / Windows等 (JavaScriptが動作する環境) |
機能
これは使い込まれている方のものを参考にしたほうがいいと思いますので、リンクから詳細を見てみてください。
こちらは、書かれた年月が少し前ですが基本的なところは抑えられているので参考になります。
SassとLESSはそれぞれ別のものですが、その機能はほぼ同等(ややSassの方が多機能)という印象。
記法
Mixinを使ってみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//変数 @line_color: #000; //Mixin //引数に初期値が使える .box(@line: #444) { margin: 10px; padding: 8px; border: 1px solid @line; } /** * box style */ div { //Mixinの呼び出し .box(); } /** * Article section */ #Article { //セレクタのネスト div { .box(@line_color); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//変数 $line_color: #000; //Mixin //引数に初期値が使える @mixin box($line: #444) { margin: 10px; padding: 8px; border: 1px solid $line; } /** * box style */ div { //Mixinの呼び出し @include box(); } /** * Article section */ #Article { //セレクタのネスト div { @include box($line_color); } } |
SCSS (Sass)とLESS?どちらを選ぶ??
実際に、SCSS(Sass)とLESSの環境を作り、少し書いて試してみた結果『SCSS(Sass)』の方がわたしにはあっているなと思ったのでこちらを選択しました。
機能面、使いやすさ、開発環境の問題、それぞれを考慮しつつ、最後は手を動かして実際書いてみるのが1番だと思っています。