12周年記念パーティ開催! 2024/5/10(金) 19:00

SassとCSS設計 第1回 Sassの基本

このシリーズでは、CSSのプリプロセッサーであるSassを用いたCSS設計を取り上げます。Sassの機能そのものでなく、機能をどう活用するかを具体的なサンプルを用いて解説します。第1回は、Sassの概要と導入についてです。

発行

著者 山田 敬美 フロントエンド・エンジニア
SassとCSS設計 シリーズの記事一覧

はじめに

このシリーズの対象者は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ビルドツールカタログ」を参照してください。

*注:Windowsのコマンドプロンプトの使用

Windowsでもコマンドプロンプトでの操作は可能ですが、導入の手順が複雑なので、Sassに慣れるまではGUIツールの利用をオススメします。

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

クロスプラットフォーム対応のSass専用のビルドツールScout。Sassの拡張フレームワークCompassも利用できる。

*注:Scoutの使用について

上記で紹介しているScoutは2012年10月9日でGitHub上の開発履歴がストップしており、使っているSassのバージョンも古いものとなっています。現時点での使用はおすすめしません。(2015年7月追記)

Sassを使う準備

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

Sassのインストール

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

*注:Rubyのバージョン

MacにはデフォルトでRubyの1.8.7が入っていますが、バージョンによって文字コード周りのコンパイル結果が異なる場合があるため、できれば新しいバージョン(今なら1.9.3か2.0.0)を使うことをオススメします。rvmrbenvといったRubyのバージョン管理ツールを使うと、簡単にRubyのバージョンを切替できるので便利です。

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

$ gem install sass

*注:Sassのインストール時のエラー

Mac OS XネイティブのRubyなど環境によっては、インストールの際、権限がないという主旨のエラーが出る場合があります。この場合は管理者アカウントとしてコマンドを実行するためにsudoを頭に付けて$ sudo gem install sassを実行します。

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

$ sass -v

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

コンパイルを試す

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

サンプル:00-compile

ここから先のステップは、以下にサンプルを置いています。

codegrid-sass/00-compile at master · pxgrid/codegrid-sass · GitHub

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

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

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

シンプルなコンパイル

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

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

$ sass --watch sass:css

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

*注:watchオプション

watchは「オプション」ということになっていますが、このオプションを付けずにコンパイルすることは、実務ではほとんどないでしょう。特別な事情がない限り、watchオプションは必ず付けるものと考えてもらってかまいません。

その場合、コンパイルされた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種類あります。

出力形式 説明 圧縮率
nested ネストされるので階層構造がわかりやすい
expanded 一般的な手書きのCSSに近い
compact セレクタごとに1行にまとめられる
compressed すべてが1行にまとめられる

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(差分)が発生することになります。

コラム:バージョン管理システムで運用する場合のCSSのDiffについて

本来であれば、Sassの生成物であるCSSはリポジトリに含めるべきではありません。出力形式をcompressedにして1行にすれば、必ずコンフリクトが起こりますし、そうでなくても各自の環境ごとにコンパイル結果が微妙に変わることで、意図しないDiffが発生する場合があるからです。サーバー上でSassをコンパイルできる環境を作り、Sassファイルのみをバージョン管理するのが理想的な方法です。ピクセルグリッドではGruntを使って、その仕組みを作っています。

しかし、さまざまな理由によりCSSもリポジトリに含めざるを得ない場合もあるでしょう。その場合には、RubyやSassのバージョン、出力形式などをチーム内で統一し、極力無駄なDiffが生まれないように運用でカバーしていくしかありません。

まとめ

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