Sass でもう一度 CSS を楽しく!

僕もようやく Sass をはじめました。評判どおり、ヤバいです。CSS を書くすべての人に習得してほしいとすら思います。とくに、最近 CSS を書いていてもつまらなかったり、設計に行き詰まりを感じたりしている人は、迷わず Sass を試してみるべきです。Sass のサイトには “Sass makes CSS fun again”—「Sass でもう一度 CSS を楽しく」というフレーズが掲げられていますが、ハッタリではありません。

しかし、実際に Sass を導入するのは敷居が高いと感じる人も多いのではないかと思います。コマンドラインとかよくわからん、独自構文の学習コストが気になる、実際に仕事で使えるのか疑問…など。

そこでこの記事では、僕が Sass をはじめるにあたって感じていた不安などをもとに、「Sass は難しくないよ!」というアピールを試みます。少しでも Sass 導入の障壁を取り除く助けになればうれしいです。

はじめに

そもそも Sass とはなにか、Sass のどこがすごいのか、といったことを知るには以下のリソースが最適です。まずチェックしてみてください。必見・必読です:

インストール

さて、いざ Sass を試してみようと思ってググってみたものの、多くの記事は「コマンドプロンプトを起動して…」とか「ターミナルに以下のコマンドを…」みたいなところからはじまっていて戸惑った人も多いのではないでしょうか。しかも「まず Ruby をインストールし…」とまるで馴染みのないプログラミング言語まで出てくる始末。多くの非プログラマにとって、コマンドラインを操作するあの「黒い画面」は馴染みがなく、とっつきにくいものだと思います。

しかし、「黒い画面」は Sass をインストールするときと作業に入るときにほんの少しのコマンドを打ち込むだけで、Sass のコード自体はいつもの使い慣れたエディタで編集できます。また Ruby はインストール時にちょっとだけ意識しなければいけませんが、以降はまったく気にする必要がないので、知識がなくても問題ありません。

まず、「黒い画面」がはじめてで怖いという人は是非この記事を読んでみてください。僕はこれで克服しました:

そして Windows/Mac へのインストールや編集の準備はすごく簡単です。手順は以下の記事がわかりやすいと思います:

構文

「Sass は CSS を拡張するメタ言語」などと言われるとややこしそうな印象を受けますがそんなことはありません。Sass の記法である SCSS (Sassy CSS) 構文は CSS と互換性があります。そのため、たとえばすでに書いた style.css という CSS ファイルを style.scss と拡張子を変えるだけで Sass として機能します。つまり Sass の構文を覚えないと何もできないということはなく、書き慣れた CSS はそのままに、少しずつ「Sass 化」していくことができるのです。

それに、入れ子、変数、ミックスインといった Sass 構文のフィーチャーは、どれも CSS をひととおり習得しているなら直感的に理解できるもので、触っているうちにすぐに書けるようになると思います。

以下のリソースは公式のリファレンスです。いきなりすべてを使いこなすことは難しいしその必要もないですが、ざっと見渡しただけでも Sass がいかにパワフルか伝わると思います:

チームでの導入

そして、Sass 導入における最大の難関は、チームで CSS を編集するプロジェクトに導入すること—つまり「会社で使えるかどうか」ではないでしょうか。

これはたしかに簡単ではないと思います。複数のメンバーが CSS を編集する可能性がある場合、その全員が Sass を学ぶ必要がありますが、メンバーのスキルやモチベーションには差があるでしょうし、導入や習得のための時間を割けないこともあるでしょう。

それでも導入を検討する価値は充分にあるし、そこにトライできる環境にいる人は是非ともそうしてみてほしいです。もちろんすべてのメンバーが同等の習熟度にある必要はありません。たとえばリーダーが基本のフレームワークを作り、ほかのメンバーが必要に応じてモジュールを追加する、というような運用も通常の CSS に比べてやりやすいです。

そして、もしチームに Sass を導入することができないとしても、ひとりひとりが Sass を習得することをあきらめてほしくない、と強く願います。なぜなら、Sass のもっとも素晴らしい点は、効率化や保守性の向上より、それを学ぶことによって CSS をより構造的に捉えられるようになることだと思うからです。Sass を習得すれば、「素」の CSS を書いたりマークアップしたりするときにも必ずプラスの影響があります。

おわりに

Web のフロントエンド技術を習得する最良の方法のひとつは、優れたサイトの「ソースを見る」ことです。しかし Sass は製作者のローカルで CSS を生成するものなので、ブラウザから Sass のソースを読むことができません。そこで Sass のテクニックを学ぶために製作者どうしで情報を共有したいところなのですが、Sass についての情報はまだまだ少なく、それはなかなか容易ではないというのが現状です。

ですから皆さん、是非、Sass を使ってみてください。そしてシブいミックスインを書いて公開してください!