【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】

Sass

どうも。
CSS Preprocessor Advent Calendar 2012
2012年12月20日（木）を担当させていただきます@ken_c_loです。

そうそうたる面々の中、みなさんハイレベルな内容で大変恐縮しているのですが、そんな中モジモジしながらしかし空気を読まずに、ずっと書きたかったウザい感じのエントリを投下しようと思います。

ズボンを履かない「SASS記法」とは？

発端はこのツイートからでした。
sass記法でやってみてるけど閉じカッコがないからすごく気持ち悪い…ズボン履き忘れて電車乗っちゃってるような違和感ある
慣れるとズボン履かない方が自然に！ヾ(*’ω’*)ﾉﾞRT @monoooki: sass記法でやってみてるけど閉じカッコがないからすごく気持ち悪い…ズボン履き忘れて電車乗っちゃってるような違和感ある
@ken_c_lo YOUやっちゃいなYO、GO!GO!裸族！！
…と、そんな流れで、「ズボンを履かない」SASS記法とはなんぞや。その魅力、カッコよさについて力説しようと思います。あわよくばSASS記法仲間を増やしたい！そして、お菓子などを食べながらSASS記法の魅力について語り合い、仲間の少なさについて嘆き合う.sassの会を月一くらいで開催できればと思います。
ヾ(*’ω’*)ﾉﾞ ｽﾞﾎﾞｰﾝ‼

SassにはSCSS記法とSASS記法、2種類の書き方がある

Sass
Sassと言えば、昨今SCSS記法の方がメジャーで、Web上で見かける資料などもSCSS記法が殆どなのですが、もう一つSASS記法（SASSシンタックス）という書き方があります。SassのSASSみたいな言い方になってしまって非常にわかりにくいのですが、もともとSassはSASS記法で書かれていたものの、CSSとはかなり見た目が違い、もともとCSSの記法に慣れ親しんでいたWebデザイナーにとっては敷居が高い感じになってしまったので、Sass3.0から、より元のCSSと近いSCSS（Sassy CSS）記法が採用され、そちらのほうが主流になったという流れのようです。
なお、SASS記法については、大文字で「SASS」なのか、小文字で「Sass」なのか、私はいまだによくわかってないのですが、「SASS」と大文字で表記して区別している資料をたまにみかけるので、ここでは記法のSASSは大文字で統一したいと思います。

では百聞は一見に如かずということで、まずはSCSSとSASSを見比べてみましょう。
先日書かせていただいた、ズルい線を例にやってみます。

まずはSCSS記法（sample.scss）


↓

これをSASS記法で書くとこうなる（sample.sass）


どうです！？このようにSCSSだと20行で書いていたところが、SASSで書くと同じ内容でも15行で済んでしまうのです。もちろん最終的にコンパイルされるCSSの文字数はかわりませんが、入力する文字数が少ないため、すごく楽になります。
要するに、SASS記法も
＿人人人人人人＿
＞　ズルい！　＜
￣^Y^Y^Y^Y^￣
と言えます。

SASS記法とSCSS記法との違い 〜実はそんなに違わない〜

SASS記法を一見してみるとCSSとの見た目の違いに少しギョッとしてしまうと思うのですが、実はSCSSと比較してそんなに大きく違うわけでもないのです。ざっくり列挙してみると、下記のような違いがあります。

  • インデントでブロックを表す
  • 波括弧 {} がない
  • セミコロン ; がない
  • : の後にスペースが必須
  • @mixin →=
  • @include →+
  • 拡張子が.sass

これらの違いを一つ一つ見てみましょう。

インデントでブロックを表すので、波括弧 {} が要らない

ここが最も大きな違いで、「ズボンを履かない」と言われる所以です。カッコで閉じなくてよい代わりに、インデント（半角スペース2つ）で1ブロックを表します。

このおかげで、書く行数がかなり短縮できます。また、例えば、あとでもう1階層ネストしたいと思ったときにも、まとめてインデントを一個下げればよいのでとっても楽です。

行末のセミコロン ; がない


これ、慣れるまでうっかりつけちゃうんですが、Sass記法では行末のセミコロン ; が要りません。うっかりつけちゃうとエラーで怒られます。しかし半日もSASSを書けば慣れます。そしてSCSSやCSSを書くときに ; をうっかり忘れるようになります。

コロン : の直後に半角スペースが必須


これも慣れるまでうっかり忘れがちなんですが、SASS記法では : のあとに半角スペースが必須になります。これもうっかり忘れるとエラーで怒られます。しかし、半日も書けば慣れます。CSSやSCSSでは必須ではないですが、本来つけたほうが読みやすくてよいので、結果的にきれいなコーディングを強いられることになります。

@mixin → = ／ @include →+ で表せる

これが一番個人的にSASS記法が好きで、またカッコイイ！と思っている点です。

"@mixin" は "="
"@include" は "+"
で表すことができます。これが、
＿人人人人人人人人
＞　カッコイイ！　＜
￣^Y^Y^Y^Y^Y^Y^￣
エディタ上でシンタックスハイライトさせた時にも、記号1文字でまとまっているので、他のプロパティなどと区別がつきやすく見やすいんですね。

ね？
＿人人人人人人人＿
＞　見やすい！　＜
￣^Y^Y^Y^Y^Y^￣
@mixin、@includeの表記のままでも大丈夫なのもよいところです。

拡張子は.sass、.scssからの変換も簡単。

SCSS記法の拡張子が.scssなのに対して、SASS記法の拡張子は.sassです。
.scssのファイルから.sassに変換するのも簡単で、ターミナルで

$ sass-convert hoge.scss hoge.sass

とやれば一発変換してくれます。また、SCSSとの併用もできます。

他にもSASS記法のよいところ

普段の仕事がRuby on RailsでHamlやCoffeeScriptを使っているため、同じインデント記法で揃って気持ちよいところも良いです。
一方で、Web上などで見かける大体のSassの資料がSCSSなため、このコードいいなあと思ってコピっても、あとで{}や;を必死で取らなければならないという欠点があります。勉強会で発表などをするときでも、話をシンプルにするため一般的に普及しているSCSSにわざわざ書きなおしたりするのが少しめんどいです。
若干オワコン感もあるSASS記法ですが、上記で述べたように楽でカッコよくてズルいので、みんな使えばいいのにと常々思っている次第です。
今流行っぽい（？）@extendとかも問題なく使えます。
ちなみに私はまだ使ったことないんですが、Stylusだと : とか + とか = とかも要らなくなってしまうみたいで、ズボンはいてないどころかパンツはいてないくらいの感じだなあと思いました。使ってみたい…。


そんなわけで、
＿人人人人人人人人人人人人人人＿
＞　SASS記法でズボンを脱ごう　＜
￣^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣
私からは、以上です。