Sassの特徴と導入をオススメする最大の理由

いまさらながら、Sassに関する記事です。

Sassに関する良い評判はかねてから聞いていたのですが、なかなか導入に踏み切れないでいました。
というのも、「導入コストに対して実務レベルでの利点がどれほどあるのが」という点について、疑問がぬぐいきれなかったからです。
実はずっと前にちらっとお試し導入をしてみたのですが、メリットも感じる反面細かなところでデメリットもあり、本格導入に二の足を踏んでいました。

そして…
1ヶ月ほど前にいよいよ思い切って本格的に導入してみて、しばらく様子を見ていました。

結果は、やはり評判通りSassは素晴らしかったです。
ためらっていた自分が間違っていました。

今回はそんなSassの良さを丁寧に振り返ってみました。

Sassについて

まずは、Sassについて簡単に説明します。

Sassの概要と、できること

概要

「Sass」とは簡素に言えば「スーパーCSS」みたいな意味です。

CSSとはそもそも単純かつ明確であるがゆえに、学習コストが低い反面、変数や演算などの複雑な処理ができません。
そこで登場したのが「Sass」です。

従来のCSSにプログラミング的要素を加えたファイルを「.sass」または「.scss」拡張子で保存し、そのSassファイルをコンパイルしてCSSファイルを作成します。
普段はSassファイルをベースにコーディングすることで、作業効率を高め、コーディングスピードを上げることができます。

セレクタのネスト(入れ子)

入れ子にすることで、コードの記述量が減り可読性が高まります。

親セレクターの参照

親セレクターを呼び出すことができます。
「:hover」や「:after」などを使用する際に便利です。

変数

変数を定義しておくことで、後々値を変更する際のメンテナンス性が向上します。
主に数値やカラーコードを変数にしておくと便利です。

演算

四則演算ができます。

ミックスイン

スタイルの定義が可能になります。変数の強化版のようなイメージです。
ベンダープレフィックスを記述する手間が省けるという利点もあります。

Compass

Sassのフレームワークの代表的なもの。
Sass機能を更に拡張してくれます。
CSSスプライトが簡単に作れるのは、非常に驚かされました。

導入までの詳細が解説されている記事と本

Sassを導入するにあたり、参考にさせていただいた記事です。
非常に有用な記事ばかりですので、Sass導入を検討されている方はブクマしておきましょう。

僕はSassの参考書も買いましたが、正直なところこれらの記事があれば参考書は必要ないかもしれません。

これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)
SassとCompassを使って楽しくCSSコーディング!
Sass + Compass の基本導入と設定ファイル config.rb について

CSSをSass化するにあたり、便利なWebービス

CSSをSass(Scss)に変換してくれるサイトcss2sassが便利です。
Sass導入を検討されている方で、CSS管理しているリソース(テンプレートなど)をSass化したいと考えている方は、このサイトを使うことになると思います。

Sass導入をすすめる最大の理由

導入後1ヶ月位経ち改めて評価してみると、やはりSassは便利です。

結局のところ、Sass導入をすすめる最大の理由は以下の二点に尽きます。

  • 作業が効率的になる。
  • 塵も積もれば山となる的観点から言えば、相当な時間短縮になる。

学習コストはありますが、お釣りは返ってきます。
いままでよりも更に一歩進んだ時間短縮を大切にしたい方や、気持ちいいコード記述にシフトしてみたい方は、是非ともSass導入をいま一度検討してみてください。。

余談ですが、導入当初のインパクトとしては、Emmet(Zen Cording)ほどの衝撃はありませんでした。
(Emmetは「文句なしに導入」レベルだと思います。これもまた衝撃!)

杉直樹
杉直樹 著者の杉直樹です。
"ライフクエスト"は、基本的にはジャンル多岐にわたる総合ブログです。
"人生をより豊かにする"と"社会をよりよいものにする"にマッチした記事をたくさん書いていけたらと思います。
お役に立てる記事があれば幸いです。