はじめに

このシリーズの対象者はSassの初心者ですが、Sassのすべての機能について、リファレンスのような網羅的な解説はしません。

というのも、Sassが普通に使われるようになった今、そのような情報はウェブで検索すればいくらでも手に入るようになったからです。

むしろ、このシリーズでは、Sassのさまざまな便利な機能を、具体的にどういう場面でどう使えばよいのかを、CSSの設計と絡めて掘り下げていきます。

Sassってなに？

CSSは誰でも簡単に記述できる言語です。ただし単純であるがために、機能が少なく不便です。

たとえば、同じ指定を使い回したくても元の場所からコピペするしかなく、後で変更するにはすべて置換する必要があるなど、プログラマーから見たら、この煩雑さにイライラさせられることも多いでしょう。

そのようなCSSの不便さを解消するために、SassはCSSのプリプロセッサーとしてつくられました。Sassで記述することで、CSSに変数や演算、関数や制御構文などが追加され、効率的に記述できるようになりました。SassをコンパイルしてCSSに変換すれば、普通のCSSとしてブラウザが認識してくれます。

Sassは難しい？

ここまでの説明で、プログラマーにはSassの便利さがなんとなく伝わったかと思います。ただ一方で、デザイナーやマークアップエンジニアにとっては、簡単だったCSSの記述が難しくなり、覚えることが増えて面倒だなと感じるかもしれません。

Sassは高機能ですので、確かにすべてを理解しようとすると大変です。しかしながら、もともとSassはCSSを楽をして書くための言語です。楽をするための言語を苦労して完全習得する必要はありません。CSSに足りないちょっとした機能を、自分に必要なものだけ利用すればいいのです。そんなに難しく考える必要はありません。

このシリーズでも、Sassの主な機能については、最低限使えるようになるレベルでしか解説しません。それよりも、その機能をどう使ってCSSを設計していくのかに重点を置きます。

なお、Sassのそれぞれの機能について詳しく知りたい場合はウェブで検索するか、電子書籍『Sass入門』を読むことで理解が深まるでしょう。

SASS記法とSCSS記法

Sassには、SASS記法とSCSS記法という2種類の記法が存在します。

SASS記法

SASS記法は簡素化のため、{}を使わずインデントのみでセレクタの宣言ブロックを表したり、宣言の最後のセミコロンを省略したりといったように、CSSとは異なる記法で書く必要があります。そのため既存のCSSファイルをそのままSass化することができません。

$gray: #ccc

.mod-box
  background: $gray
  padding: 10px

  .mod-box-inner
    background: lighten($gray, 13%)

SCSS記法

SASS記法に対して、SCSS記法はCSSと同じ記法のため、普通のCSSを書くのと同じ感覚で使えます。また、既存のCSSのファイル拡張子を「.scss」にするだけでそのままSass化することができます。

$gray: #ccc;

.mod-box {
  background: $gray;
  padding: 10px;

  .mod-box-inner {
    background: lighten($gray, 13%);
  }
}

出力されるCSS

.mod-box {
  background: #cccccc;
  padding: 10px;
}
.mod-box .mod-box-inner {
  background: #ededed;
}

制作の現場ではSCSS記法が採用される場合が多いようです。このシリーズでも、SCSS記法を前提として解説していきます。

Sassのビルド環境

SassはCSSに変換（コンパイル）しなければブラウザが認識できないので、コンパイルのためのビルド環境が必要です。とはいっても、Macユーザーであれば、環境のインストールも含め、ターミナルからコマンドを打つだけでコンパイルが可能です。

Windowsユーザー*や、ターミナルでの操作が苦手な方は、画面操作だけで使えるGUIビルドツールを利用してみるのもよいでしょう。詳しくは「Sassビルドツールカタログ」を参照してください。

このシリーズでは、ターミナルを使って解説していきますので、それぞれの環境に合わせて読み替えてください。

Sassを使う準備

ここではMacのターミナルでコンパイルできるようにするための手順を解説します。GUIツールを使う場合は、各サイトを参照してインストールして、この節は読み飛ばしてください。

Sassのインストール

SassのインストールとコンパイルにはRubyが必要です。MacにはデフォルトでRuby*が入っているので、今回はこれを使うことにします。

それではさっそく、Sassをコンパイルできる環境を作りましょう。まず、RubyGemsを使ってSassをインストールします*。

$ gem install sass

インストールが終わったら、正常にインストールできたかを確認します。Sassのバージョンが表示されれば成功です。

$ sass -v

これでSassを使う準備は整いました。簡単ですね。

コンパイルを試す

導入しただけで終わってしまうのもつまらないので、実際にSassのコンパイルを試してみましょう。

プロジェクトのディレクトリの準備

ディレクトリ構造は自由ですが、Sassのファイルはプロジェクト内で1箇所にまとめておいた方が管理が楽なので、次のような構造をオススメします。

project
-- css
-- sass
   `-- style.scss
(以下省略)

シンプルなコンパイル

コンパイルはsassコマンドで行います。sass:cssの部分は、Sassファイルあるディレクトリ名 : コンパイルしたCSSの出力先のディレクトリ名を指定します。

Sassファイル単体を指定してコンパイルすることもできますが、ディレクトリを指定することで、その中にあるSassファイルすべてを監視できるので便利です。

$ sass --watch sass:css

このとき--watchとして、watchオプション*をつけることで指定したディレクトリ内のSassファイルすべてを常に監視（watch）してくれるようになります。すると、監視下のSassファイルのいずれかが変更されるたびに、自動的に再度、CSSにコンパイルしてくれます。

その場合、コンパイルされたCSSファイル名は、コンパイル前のSassファイルと同様の名前になります。

それでは実際に、サンプルファイルをコンパイルしてみましょう。サンプルのsassフォルダ内のstyle.scssは、下記のように書かれています。このときはまだcssフォルダ内は空の状態です。

@charset "utf-8";

$color-body: #FAF9F5;
$color-text: #4D220F;

body {
  background-color: $color-body;
  color: $color-text;
}

ターミナルを開き、cdコマンドで、プロジェクトのルートディレクトリに移動したら、下記のコマンドを実行し、style.scssをコンパイルします。

$ sass --watch sass:css

コンパイル時、ターミナルにWARNING（警告）が出る場合は、エラーメッセージを確認して、次のようなコマンドで足りないgemモジュールをインストールしてください。

$ gem install モジュール名

コンパイルが終わると、cssフォルダ内に、下記の内容でstyle.cssというファイルが生成されました。これ以降はstyle.scssを何か編集するたびに、自動的にstyle.cssが更新されます。

body {
  background-color: #faf9f5;
  color: #4d220f; }

生成されたCSSファイルのコードは、元のSassファイルのコードから微妙に変化しています。具体的には変数が代入されていることなどが挙げられます。これについては、このシリーズで次回以降、解説していきます。

出力形式

SassをCSSにコンパイルするときに、styleオプションでCSSの出力形式を指定できます。出力形式には、次の4種類あります。

File: SASS_REFERENCE - Sass Documentationにあるコンパイル後のソースコードを見てもらうと、なんとなくイメージしやすいと思います。

出力形式を指定してコンパイル

次に出力形式を指定して、コンパイルする方法を試してみましょう。一度、Ctrl＋Cキーを押して、watchを停止します。次にコマンドを入力します。

先ほどのコマンドに加え、出力形式を--style 出力形式名として、styleオプションを指定すればいいだけです。

$ sass --watch sass:css --style compact

この例では--style compactとして、compactを指定しました。出力結果は次のようになるはずです。

body { background-color: #faf9f5; color: #4d220f; }

シンプルなコンパイルのときとは違い、1行にまとめて出力されました。なお、出力形式を何も指定しない場合はデフォルトのnestedになります。

出力形式の統一は重要

複数人で作業する場合は、この出力形式をチーム内で統一しておかないと、書き出される結果がばらばらになり、大変困ったことになります。また、次のコラムにあるようにバージョン管理システムでリソースを管理している場合、CSSの意図しないDiff（差分）が発生することになります。

まとめ

今回はSassの導入とコンパイルを解説しました。次回からは、さらに突っ込んだSassの活用方法を紹介していきます。