Web制作環境を整える その7 – Sass(SCSS) + Compass でもっとCSSを!

Sass + Compass

今時のWeb制作者なら押さえておかなければならない Sass(SCSS) + Compass によるCSSコーディングを、Sublime Text 3 に導入します。
CSSフレームワークに頼らず、尚且つ、開発スピードを落とさないことを目指します。ちなみに、このページで説明しているのは Windows 環境での導入方法です。

Sass とか SCSS って何さ?

Sass(サス) とは CSSを記述するためのメタ言語です。PHP等を書いてる人なら誰でも一度は「CSSで変数つかえねぇかなぁ」と思ったことがあるでしょう。Sassは、変数や算術演算、セレクタ指定のネスト、外部ファイルの読み込み、複数のCSS定義の結合(ミックスイン)などを利用することができます。コンパイルすることでCSSファイルへと変換するソフトウェアです。お仲間で HTML を記述する HAML というメタ言語もあります。
そして Sass のバージョン3.0 から CSS の文法・記法が取り入れられたものが SCSS(Sassy CSS)です。CSSの書き方に慣れている人は SCSS の方がすんなりと理解できると思います。Python っぽい書き方を好む人なら Sass の記法がより効率的に書けるかもしれません。

Sass でどんなことができるの?

Sass の使い方の一例を見ていきましょう。

変数を使う

プログラムのように変数を定義して使いまわすことが出来ます。

こうしておけば、1箇所の変更で全てが反映されます。

ネスト(入れ子)で記述できる

HTML の構造に合わせて入れ子で記述することができます。

こんなCSSコードも

こんな感じで、オブジェクト定義みたいに書けます。

mixin(ミックスイン)機能を使える

mixin とは関数と同じようにスタイルをあらかじめ定義しておいて、いつでも呼び出せるようにする機能です。関数と同様に、引数を使う事も可能です。
@mixin で定義し、@include で呼び出します。

多くの方が便利な mixin を公開していますので、とても勉強になります。

まだまだ Sass のほんの一部ですが、強力な機能の一端を感じ取れたでしょうか。

じゃあ Compass って?

Compass とは Sass の機能を拡張する補助プログラムです。便利な Mixin が多数用意されていて、スプライト画像を作成できたり、プロジェクト毎に設定を変えたりできるのです。

最近は肥大化した Compass を嫌って、Bourbon(バーボン)という Mixinライブラリを使用する人もいる様ですね。気になる方はチェックしてみてはいかがでしょうか。

Sass(SCSS), Compass の導入

Sass は ruby という言語で動作するプログラムです。MacOX には最初からインストールされていますが、Windows ではダウンロードしてくる必要があります。

Ruby公式サイト

のダウンロードから Windows版Rubyバイナリ の最新版をダウンロードしましょう。
3つ種類がありますが、私は真ん中の mingw32版 を選択しました。別サイトへ飛ばされますが、Download – Ruby 2.2.1(x64) をダウンロードしました。

ダウンロードしたEXEファイルを実行します。インストール場所はデフォルトのまま C:/Ruby22-x64 へ。環境変数PATHに加えるようチェックを入れてインストールしました。

インストールが完了したら、コマンドプロンプトを起動します。以下のようにコマンドを入力してみましょう。

Rubyのバージョンが表示されれば、インストール成功です。エラーが出た場合はインストールに失敗したか、環境変数が通ってないと思われます。再起動してもう一度試すといいでしょう。

次のコマンドも試してください。

RubyGem のバージョンが表示されましたか?
RubyGemとは、Rubyのパッケージを管理するプログラムです。Sublime Text でいう Package Control ですね。ですので、この Gem を使って Sass と Compass をインストールしていきます。

と入力して、Compass をインストールしてください。パッケージ管理ソフトのいいところは、依存パッケージも自動で一緒にインストールしてくれる所です。Compassをインストールすれば、Sass もインストールされるはずです。

Compass と Sass がインストールされたか確認してください。

Sublime Text 3 をセッティングする

次は、Sublime Text 3 側に必要なパッケージをインストールします。といっても、以下の5つのパッケージを、いつものように Package Control からインストールするだけです。

  • Compass
  • Sass
  • SASS Build
  • SCSS
  • SCSS Snippets

Config.rbを作成する

では、Sassが動作するか確認しましょう。動作としては Compass プログラムを通して Sass でコンパイルをする流れになります。Compass を動作させるには Config.rb という設定ファイルが必要になります。Config.rb は通常プロジェクトルートに設置します。

とりあえず動作が確認できればいいので、簡単に設定を。この設定だと scssファイルと同じ場所に cssファイルを作成します。
もっと詳しい Config.rb の説明は、

Compass設定ファイル(config.rb)|sass|study|kanapple.net

のページで解りやすく解説してくれています。

次は、同じ場所に scssファイルを新規作成します。 今回はファイル名を style.scss としました。style.scss を以下のように編集します。

1行目の @import で Compass を読み込んでいます。6行目で、Compassに用意されている box-shadow の Mixin を呼び出しています。
保存したら、CSSファイルへコンパイルしましょう。まず、メニューの [Tools] – [Build System] – [Compass] を選びます。続けて、[Tools] – [Build] を選択、もしくは F7 を押してコンパイルしましょう。
ビルド結果が表示され、エラーが無ければ成功です。同じフォルダ内に style.css が作成されました。

自動的にベンダープレフィックスを追加してくれています。


今回は Sass(SCSS) + Compass を Sublime Text 3 で動かす所までを説明しました。 次回は Emmet との併せ技を勉強したいと思います。