CSSを超効率化する！SASSの基本と導入方法まとめ

SASSでCSSがもっと便利になる！

SASSとは？

SASS（Syntactically Awesome Style Sheets）とは、CSSを拡張したメタ言語（プリプロセッサー）のことです。CSSを使った開発を便利にできるので、Web系のエンジニアであればぜひともマスターしておきたい言語の一つです。

SASSには2種類の記述方法があります。SASS文法と、それを書きやすくしたSCSS文法（Sassy CSS）の2つです。SASS文法を使う時は拡張子を「.sass」に、SCSS文法の時は「.scss」にします。どちらの場合も、ファイルをコンパイルするとCSSファイルが生成される仕組みになっています。

なおSASSと似たメタ言語として、LESSが知られています。

LESS The Dynamic Stylesheet language

共通する機能もあるのですが、文法が異なります。また、そもそもベースとなっている言語が違います。SASSはRubyで動いているのですが、LESSはJavaScriptで動いています。

SASSの何がいいのか？

SASSを使うと、どんなメリットがあるのでしょうか？ここではSASSの導入で得られる主なメリットを3つにまとめました。

開発スピードが上がる

SASSを使うと、コード量を大幅に減らすことができます。開発のスピードをアップさせ、生産性を上げることが可能です。

メンテナンス性が上がる

コード量が減ることでメンテナンス性が上がり、リファクタリングもし易くなります。見るべきコードが少なくなりますし、コードも理解し易くなるでしょう。

バグが減らせる

SASSを導入することで、バグを減らすことも期待できます。コード量だけでなく、コードの見通しも良くなることが理由です。

SASSの導入方法

SASSを導入する方法です。前述したように、SASSはRubyで動きます。SASSを導入する前にRubyをインストールしておくことを忘れずに。

Macに導入する方法

MacにSASSを導入するには、ターミナルから下記のコマンドを実行します。

$ gem install sass

これでインストールは完了です。とても簡単ですね。インストールが出来たら、下記のコマンドでインストールの確認をしておきましょう。

$ sass --version

バージョン情報が表示されていればOKです。

Windowsに導入する方法

Windowsの場合も、Macと同様の方法でインストールできます。Rubyをインストールしたのち、gemコマンドを実行するだけです。

SASSを使ってみる（Hello World）

Hello Worldがてら、インストールしたてのSASSを動かしてみましょう。SASSを使う方法ですが、手動でコンパイルする方法と自動でコンパイルする方法とがあります。

ファイルを作成する

はじめに、SASSのファイルを作りましょう。拡張子が「.scss」のファイルをつくり、サンプルコードを入力して保存します。

[code title="style.scss"]
#main {
    width: 1024px;
    p {
        margin: 0;
    }
}
[/code]

コンパイルする

手動でコンパイルする方法

ファイルを保存したディレクトリに移動したのち、下記のコマンドを実行します。

$ sass style.scss:style.css

style.cssという名前のファイルが生成されるかと思います。ファイルをひらいてください。下のように、コンパイルされたCSSが確認できたでしょうか。

#main {
  width: 1024px; }
#main p {
  margin: 0; }

自動でコンパイルする方法

SASSに任意のファイル（ディレクトリ）を監視させ、自動でCSSを出力させることも可能です。下記のコマンドを実行すると、指定したファイルが監視状態になります。ファイルが編集されて更新されると、CSSが自動出力されます。

$ sass --watch style.scss:style.css

ディレクトリごと監視をする場合は、下のように入力します。

$ sass --watch ディレクトリ名

SASS学習の参考サイト

最後に、SASSの学習に役立つ参考サイトについてまとめておきましょう。

Sass: Syntactically Awesome Style Sheets

Sass: Syntactically Awesome Style Sheets

まずは、SASSの公式サイトから。インストール方法や使い方、最新情報などが掲載されています。英語です。

下記のページにて、リファレンスも提供されています。

File: SASS_REFERENCE - Sass Documentation

Sass - チュートリアル

Sass - チュートリアル

SASSの公式チュートリアルを日本語訳したページです。同じサイトに、「A List Apart」を翻訳してあるページもあります。こちらも参考になりますよ。

Sassで行こう！

Web制作者のためのSassの教科書 - 公式サポートサイト

Web制作者のためのSassの教科書 - 公式サポートサイト

「Web制作者のためのSassの教科書」のサポートサイトです。サンプルソースやリンクも掲載されています。

SassMeister | The Sass Playground!

Sass Meister | The Sass Playground!

SASSをコンパイルした時に出力される内容が、リアルタイムで確認できるツールです。サッと確認をしたい時などに便利です。

Compass Home | Compass Documentation

Compass Home | Compass Documentation

SASSをもっと便利にしてくれるCSSフレームワーク、Compassの公式サイトです。

CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

SASSとLESSの違いについて解説してある記事です。機能の比較や動作環境など、情報も細かく参考になります。

あとがき

SASSの基礎知識から導入方法、参考サイトについてご紹介しました。今回はSASSをコマンドで動かしましたが、CodeKitやScoutなどのGUIツールもおすすめです。CSSがわかっていればSASSの習得は難しくはないので、積極的に活用していきましょう。