プログラミング初心者向け「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を導入するには、ターミナルから下記のコマンドを実行します。

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

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

Windowsに導入する方法

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

SASSを使ってみる（Hello World）

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

ファイルを作成する

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

コンパイルする

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

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

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

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

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

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