CSSの編集を効率化する!SASS・Compassの開発環境を構築する方法 

SASS・Compassの開発環境を構築する方法

CSSの作成が超捗る「SASS・Compass」での開発

ただ、CSSとは違い「テキストエディタがあれば開発できる!」というのもではありません。

今回は、SASS・Compassの開発に必要な環境の構築と、簡単な動作検証の方法を紹介していきます!

SCSS(SASS)・Compassの開発環境を構築する流れ

ブログのカスタマイズでバリバリSASSを使っています。よっひー(@yosiakatsuki)です。

CSSの開発効率が「ぐん!」と上がるSCSS(SASS)。

いざ始めようと思ったときに、必要になるのはSCSS(SASS)の開発環境です

今回、SASS・Compassの開発環境の構築方法をWindows環境へのインストールの仕方をメインにお話ししていきます!(スクリーンショットはありませんが、Mac環境へのインストール方法も合わせて説明します)

(※記法的にはSCSSが主流だと思いますが、みんなが「SASS」と呼ぶので本記事でもSCSS・SASSをまとめてSASSと呼んで説明します。)

「SASS・Compassって何が便利なの?」

全体の流れの説明の前に…

今回は主に開発環境の作成について話していきます。

もし「興味はあるんだけど、SASSって何が便利なの?」という「SASSに手を出そうか迷っている」場合は、SASS・Compassの便利さについて書いた記事がありますのでまずはそちら後御覧ください。

「SASSのここだけ知ってるだけでも十分覚える価値があるよ!」ということについて話しています。

まずはSASS・Compassの開発環境構築の流れをざっくり

SASS・Compassの開発環境の構築から、実際にSASSでCSSのを作り出すまでのざっくりとした流れは次のような感じです。

  1. Rubyをインストールする
  2. SASS・Compassをインストールする
    • SASS・Compassのインストール下準備
    • SASSのインストール
    • Compassのインストール
  3. SASSのプロジェクトファイルを作成
    • プロジェクトに必要なファイル・フォルダの作成
    • SASS・CompassをコンパイルしてCSSファイルを作成
    • コンパイル用バッチファイルの作成
  4. 実際にSASSを書いてみる

この他、最後に初期設定で知っておきたいことについて少し触れています。

それでは!はりきって環境構築していきましょう!

Rubyをインストールする

Macユーザーの場合、もしくは既にWindows PCにRubyがインストールされている場合はRubyのインストールはスキップしてOKです!

次の「SASS・Compassをインストールする」に進みます!

Rubyのインストーラーをダウンロード

SASS・CompassをWindwsにインストールするために必要になるRubyを公式サイトからダウンロード

Windowsユーザーの場合、SASS・Compassをインストールするために、まずRubyが必要になるので、次のサイトからRubyのインストーラーをダウンロードします。

RubyのインストーラーをOSに合わせてダウンロードする

自分のPCが64ビットOSなのか、32ビットOSなのかによってダウンロードするインストーラーが変わるので注意して下さい!

ご自身の環境に合ったインストーラーをダウンロードしたら、実行してRubyのインストールを進めます。

PCにインストール

インストールを開始するとまずは言語の選択になるので日本語を選択し、次に出てくる利用規約的なものをよく読んで同意します。

Rubyのインストール時に、環境変数PATHを設定するオプションを必ず選択する

その後、インストール先の選択とオプションの選択画面になるのですが、ここで「Rubyの実行ファイルへ環境変数PATHを設定する」のチェックを入れる事を忘れないで下さい。

ここ以外はデフォルト設定のまま進んでインストールをしてOKです。

インストールが完了したら、続いてSASS・Compassをインストールしていきます。

SASS・Compassをインストールする

それではSASS・Compassをインストールしていきます。

Windowsであればコマンドプロンプト、Macであればターミナルから作業していきます。

SASS・Compassのインストール下準備

まずは下準備としてgemのアップデートを行います。

次のコマンドをコマンドプロンプト(またはターミナル)に打ち込みます!

//Windowsの場合は↓
gem update --system
//Macの場合は↓(パスワードの入力を求められると思います。パスワードを入力して進めて下さい)
sudo gem update --system

ファイヤーウォールの警告が出ることがあるかもしれませんが、アクセスを許可すれば次へ進めます。

もし、Windowsでエラーが発生するようであれば、次の記事を読んでみてください。

gemのアップデートが完了したら、次へ進みます。

SASSのインストール

続いてSASSをインストールをします。

次のコマンドを打ち込んでSASSをインストールします。

//Windowsの場合は↓
gem install sass
//Macの場合は↓
sudo gem install sass
SASSをコマンドプロンプトからインストールしていきます

コマンドを打ったらインストールが完了するまで少しまちます。

Compassのインストール

続いてCompassをインストールしていきます。

SASSのインストールの時と同様で、

//Windowsの場合は↓
gem install compass
//Macの場合は↓
sudo gem install compass

Macでエラーが出た場合は次の記事を参考にしてみてください。

Compassのインストールでエラーが表示された時の対処法

Windows環境でCompassインストール中にエラーが発生

Windows環境でインストール中に上の写真のようなエラーに遭遇しました…

エラー内容は「The 'ffi' native gem requires installed build tools.」

解決方法はDevKitをダウンロードしてきてRubyのパスを通してあるフォルダにビルドしろって言ってるみたいです。

Compassのインストールエラー対処の為にDevKitダウンロードします

もう一度Rubyのインストーラーをダウンロードしたページヘ戻り、「DEVELOPMENT KIT」をダウンロードしてきます。

ダウンロードしたファイルをデスクトップなどで解凍すると中身が散乱して大変なことになります…(大変なことになりました)

Cドライブ直下に「DevKit」などの名前(半角英数、空白なし)でフォルダを作り、そこで解凍すると作業しやすいと思います。

作ったフォルダにダウンロードした「DEVELOPMENT KIT」をコピーし、ダブルクリックで解凍します。(ダイアログが表示されたら「Extract」を押して解凍)

解凍したフォルダでコマンドラインから作業をすることになります。

DevKitを解凍したフォルダでコマンドプロンプトを起動する

「DEVELOPMENT KIT」を解凍したフォルダでShiftキーを押しながら右クリック→「コマンドウィンドウをここで開く」を押してコマンドプロンプトを起動します。

コマンドプロンプト上で次のコマンドを打ち込みます

ruby dk.rb init

そして、作られた「config.yml」というファイルを編集します。

comfig.ymlにRubyのパスを記入して保存する

上の図のように、Rubyをイントールしたフォルダのパスを「-(ハイフン)+パス」の形式で記入して保存します。

その後、確認の為次のコマンドを実行します。

ruby dk.rb revew
入力したRubyのパスがコマンドプロンプトに表示されればOK

ファイルに記入したパスが表示されれば準備OKです。

続いて、次のコマンドを実行してインストールを行います。

ruby dk.rb install
DevKitのインストールが完了するとInfoメッセージが表示されます

上のようなメッセーが表示されてインストールが完了しました。

ここまでできたら再度Compassのインストールを実行します。

再度Compassをインストールします。今度はエラーも表示されること無く、成功しました!

無事インストールできたみたいです。

確認の為「compass -v」とコマンドを打ってみて、バージョン情報が表示されれば無事インストールされています。

SASSのプロジェクトファイルを作成

SASS・Compassのインストールが完了しました!

それでは早速、SASSで開発をすすめる為に必要なファイル・フォルダを作成していきます!

プロジェクトに必要なファイル・フォルダの作成

SASS・Compassでの開発はCSSと違って、いろいろと設定ファイルやフォルダが必要になります。

まずは、SASSのプロジェクトを作るフォルダを作成します。

今回は例として「E:\sasstest」プロジェクトを作成してみようと思います。

他の場所でも構わないとは思いますが、なるべくの日本語のフォルダ名や空白の混ざったフォルダ名がパスに含まれない場所に作ったほうが安全です。

(検証はしてませんが、経験上日本語・空白が混ざるパスで作業しようとするとエラーが起きる率が高いです)

プロジェクトを作るフォルダ「E:\sasstest」を開き、Shiftキーを押しながら右クリック→「コマンドウィンドウをここで開く」を押してコマンドプロンプトを起動します。

Macの場合はcdコマンドで目的のフォルダへ移動して下さい。(Windowsでも使用可)

プロジェクトを作成するフォルダに移動したら、次のコマンドを実行します。

compass create
Compassの開発に必要な初期ファイルをコマンドで作成する

コマンドを1つ叩くだけで、フォルダにいろいろとSASS開発に必要なファイルが出来上がります。

「config.rb」というファイルがプロジェクトのフォルダ階層などを記述した設定ファイルになります。

出来上がった「config.rb」の中は次のようになっています。

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

設定ファイルの内容としては各ファイルの置き場所が書かれているのですが、ひとまず最初は次の2点だけ覚えて頂ければOKです。

  1. CSSは「stylesheets」フォルダ内に作られる
  2. コンパイルするSASSファイルは「sass」フォルダ内で編集する

この設定は相対パスで書かれているので、あとからsasstestフォルダごと別の場所へ移動も出来ます。

cdコマンドでフォルダを移動するのが面倒な場合、なるべく浅い階層で「compass create」して、フォルダを目的の場所へコピーするほうが早かったりします。

(※「config.rb」の設定方法については最後に改めて説明します。)

SASS・CompassをコンパイルしてCSSファイルを作成

SASSはCSSと違い、書いたファイルをHTML側でlinkタグで読みこめばOKというものではありません。

CSSにコンパイルする作業が必要になります

SASSで書かれたファイルを「コンパイル(ビルドという場合も…)」して、CSSを作り出す。出来上がったCSSファイルをHTML側のlinkタグで読み込むという手順になります。

コンパイルに関しては便利なGUIツールがあったり、Sublime Textなどのプラグインでビルドツールが有るのですが…

僕はいつも次のコマンドでSASSファイルのコンパイルをしています。

//compass watchの略
compass w

「config.rb」が保存されているフォルダでコマンドプロンプトを開き「compass watch」と入力すると、SASSファイルの変更の監視をして、変更があれば自動でコンパイルしてくれます

最初はSublime Textのビルド用プラグインを使っていましたが、ビルドするたびMacが重くなって動かなくなる現象に見舞われたので、「compass watch」コマンドでコンパイルするようにしています。

コンパイル用バッチファイルの作成

実際にSASSを書くとき、必ずしもcdコマンドで移動しやすいところにプロジェクトのフォルダがあるとは限りません…

特に、PCにWordPressのローカル環境を構築して、「themes」フォルダ内に設置したテーマのフォルダ内SASSのプロジェクトを作ろうものならcdでの移動がやたら面倒なことになります…

「フルパスコピーしてcdすれば一発でしょ」という考えも浮かぶわけですが…そんなことより「compass watch」コマンドをバッチファイルで作って、ファイルのダブルクリックで実行出来たほうが数倍ラクです。

ということで、ファイルダブルクリックで「compass watch」コマンドを実行できるバッチファイルを作ります。

出来上がったバッチファイルは「config.rb」が保存されているフォルダに保存・実行して下さい。

Windows・Macそれぞれのバッチファイルの内容は次のとおりです。

Windowsの場合

Compassをコンパイルするバッチファイルを作成する

Windowsの場合は写真のように、次のコードをメモ帳などで打ち込んで、「compasswatch.bat」のようなファイル名で保存します。

compass w

ファイル名はなんでもいいですが、拡張子は「.bat」にしてください

Macの場合

Macの場合は次のコマンドを拡張子「.command」で保存します。

#!/bin/bash
htdocs=$(dirname $0)
cd $htdocs
compass watch

実際にSASSを書いてみる

SASS・Compassの開発環境とコンパイルの準備が出来ました!

ここまで来れば後はひたすら書いて覚えるだけですが、まずは動作検証をしてみます!

.SCSSファイルを作って開発!

sassフォルダにstyles.scssファイルを作成する

デフォルトの設定では「sass」フォルダがSASSファイルの置き場になっていますので、「sass」フォルダ内に「styles.scss」というファイルを作ります。

拡張子は「.scss」です。

このファイルをコンパイルすると、SASSのファイル名がそのままCSSのファイル名になり、「CSS」フォルダ内に「styles.css」というCSSファイルが出来上がります。

それでは、早速SASSでコードを書いてみます。

SASSで早速コードを書いてみます。SASSならネストして書けるところが便利です
/* CSSだと下記のように書いていたことが… */
.post h2 {
    font-size: 2em;
}

//SASSならネストして書ける
.post {
    h2 {
        font-size: 2em;
    }
}

SASSが便利だと思う機能を早速使って書いてみました。

ファイルを保存する前に先ほど作ったバッチファイルを実行しておけば、ファイル変更と同時にコンパイルが実行されます。

以降、コマンドプロンプト(もしくはターミナル)を閉じないかぎりずっと監視・コンパイルを実行し続けてくれます。

Compass Watchでコンパイルを自動実行するものの、エラーが発生…

ファイルを保存すると同時に、コンパイルが実行され…エラーが吐き出されました…

日本語を書く場合は「@charset "utf-8";」を先頭に書く必要がありました。忘れてました。(コメントでのみ日本語を使用する場合も必要になります。)

日本語が使えるように1行書き加えて再度コンパイルします
@charset "utf-8";
/* CSSだと下記のように書いていたことが… */
.post h2 {
    font-size: 2em;
}

//SASSならネストして書ける
.post {
    h2 {
        font-size: 2em;
    }
}

再度コンパイルを実行すると、無事「E:\sasstest\stylesheets」内に「styles.css」が出来上がりました!

@charset "UTF-8";
/* CSSだと下記のように書いていたことが… */
/* line 3, ../sass/styles.scss */
.post h2 {
  font-size: 2em;
}

/* line 9, ../sass/styles.scss */
.post h2 {
  font-size: 2em;
}

ひとまず基本的な開発環境は出来上がりました!

これで思う存分SASS・Compassで開発をすることが出きると思います!

このままでもSASS・Compassでの開発を楽しめるとは思いますが、初期設定をちょっといじくるといろいろ便利になる部分もあるので、合わせて見てみて下さい。

最初に知っておきたい初期設定の話

SASS・Compass(というかCompass)の開発での設定ファイルとなる「config.rb」ですが、各フォルダの設定以外にも設定できる項目があります。

例えば、「output_style」を「compressed」にすると出力されるCSSはコメントが削除され、1行に圧縮された状態で出てくる…

などなど、知っておくと便利なことがいろいろあります。

僕の場合、「output_style」を「compressed」にするくらいしか設定していないませんが、他にもいくつか設定項目があり、その設定について下記の記事が参考になるので、ぜひ読んでみてください。

「読むの面倒くさいな…」という場合は次のように編集してみてください

個人ブログのカスタマイズをするのには十分な設定になると思います。

config.rbを1行書き換えるだけで、個人ブログのカスタマイズには十分な設定になります
//↓のコメントされた行を
# output_style = :expanded or :nested or :compact or :compressed
//↓のように編集します
output_style = :compressed

「config.rb」は最初に編集したら後はほとんど開くことはないと思いますので、最初のうちに編集方法を知っておくといいと思います。

さいごに

まずは環境構築編ということで、SASS・Compassのインストール方法と簡単な動作確認まで説明しました。

僕はWEB屋さんではないので、「個人ブログのカスタマイズを便利にする」程度の使い方しかしていませんが、それでもCSSを直接編集するよりかなり効率的にCSSを作ることができるようになりました

今回は基本的な部分でしたが、後日僕が実際に使っている次の2点について紹介したいと思います。

  • レスポンシブWEBデザイン用のSASSファイルテンプレート
  • 開発効率をアップさせるSCSSファイルの分け方

お楽しみに。

ネットで調べるだけでも十分情報はGETできますが、これからSASSを勉強しようと思っているなら、次の書籍が初心者にも優しく解説しているのでぜひお手に取ってみてください。

よっしーのひとこと

よっひー

一度覚えるとCSSを直接いじるのが結構面倒になるくらい便利です。

CSSが書ければ十分SASSを始められますのでぜひチャレンジしてみてください!

ではまた。