コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編

すぐに使えるSCSS入門

#SCSS

#HTML5

#RIA

#Sublime Text

#CSS

野中龍一

2013.01.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。

最近Sublime Text 2のライセンスも買って、本格的に使い始めました。
そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。

この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。
難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。

主な流れ

主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。
それが終わればSublime Text 2の設定を行い、コンパイルを試します。

Rybyのインストール
インストールの確認とコンソール
Sassのインストール
Compassのインストール
Sublime Text 2とパッケージをインストール
プロジェクトの作成
コンフィグファイルの作成
コンパイルの実行

1, Rubyのインストール

まずはRubyをインストールしましょう。

Windows

Windowsの場合はRuby Installer for Windowsを使いさくっとインストールを済ませます。

RubyInstaller-for-Windows

インストールを実行

Rubyインストール実行

言語の選択

Rubyインストール言語選択

使用許諾契約書に同意

Rubyインストール：仕様許諾契約書に同意

保存先とPATHの設定

後からPATHの設定をするのは面倒なので、チェックを入れて自動でやってもらいましょう。

Rubyインストール：保存先とPATHの設定

インストール中

インストール完了を待ちます。

Rubyインストール：インストール中

インストール完了

できあがり！

Rubyインストール：完了

Mac

MacはデフォルトでRubyが入っているのでgemのアップデートだけ行います。
次のステップで詳細を説明します。

2, インストールの確認とコンソール

ここで、Windows, Mac共に黒い画面が登場します。
難しいことはしないので、手順にそって進めましょう。

Windows

Windowsのスタートボタン、またはWindowsキーを押下してプログラムとファイルの検索に「cmd」と入力して候補に出てくる「cmd.exe」を選択して実行します。

コマンドプロンプト

Rubyのバージョンチェック

「ruby -v」と入力してバージョン情報が返ってくるか確認しましょう。

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\Users\Ryuichi>ruby -v
ruby 1.9.3p374 (2013-01-15) [i386-mingw32]

gemのアップデート

gemとはRubyのパッケージ管理システムのことです。
最新版かどうかチェックするためにもこのコマンドを実行しておきます。

C:\Users\XXX>gem update --system
Latest version currently installed. Aborting.

最新版のようなので問題なさそうです。
Macの部分を飛ばして次の項に進みましょう。

Mac

control + spaceを押してSpotlight検索を開きます。
そこで「terminal」と入力して候補に出てくるターミナルを実行しましょう。

ターミナル

バージョンチェック

少し古いようなのでコマンド「gem update --system」で最新版にアップデートします。

Private-Mac:~ ryuichi$ gem update --system
Updating RubyGems
Updating rubygems-update
ERROR: While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions into the /Library/Ruby/Gems/1.8 directory.

なにやらWARNINGが返ってきました。
そんな時はコマンドの頭にsudoを付けて「sudo gem update --system」と入力して実行します。

途中でパスワードの入力を求められるので嫌がらずに入力しましょう。

Private-Mac:~ ryuichi$ sudo gem update --system

WARNING: Improper use of the sudo command could lead to data loss
or the deletion of important system files. Please double-check your
typing when using sudo. Type "man sudo" for more information.

To proceed, enter your password, or type Ctrl-C to abort.

Password:
Updating RubyGems
Updating rubygems-update
Successfully installed rubygems-update-1.8.24
Updating RubyGems to 1.8.24
Installing RubyGems 1.8.24
RubyGems 1.8.24 installed
    
== 1.8.24 / 2012-04-27

* 1 bug fix:

  * Install the .pem files properly. Fixes #320
  * Remove OpenSSL dependency from the http code path


------------------------------------------------------------------------------

RubyGems installed the following executables:
 /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/gem

微妙にバージョンが上がっていますね。

それでは、次のステップに進みましょう。

3, Sassのインストール

ここで、主役となるSassのインストールを進めます。Windows, Mac共に同じコマンドです。

Windows

C:\Users\Ryuichi>gem install sass
Fetching: sass-3.2.5.gem (100%)
Successfully installed sass-3.2.5
1 gem installed
Installing ri documentation for sass-3.2.5...
Installing RDoc documentation for sass-3.2.5...

Mac

また怒られました。
めんどくさいですが今回はコマンドごとに「sudoを頭に」付けてパスワードを入力して実行します。

Private-Mac:~ ryuichi$ gem install sass
Fetching: sass-3.2.5.gem (100%)
ERROR: While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions into the /Library/Ruby/Gems/1.8 directory.
Private-Mac:~ ryuichi$ sudo gem install sass
Password:
Fetching: sass-3.2.5.gem (100%)
Successfully installed sass-3.2.5
1 gem installed
Installing ri documentation for sass-3.2.5…
Installing RDoc documentation for sass-3.2.5…
Private-Mac:~ ryuichi$

これでSassのインストールは完了です。
続いて、とても便利なCompassもインストールしておきましょう。

4, Compassのインストール

Compassをインストールすればコンソールを使った作業は最後です。
黒い画面が苦手な方ももう少し耐えましょう。

Windows

「gem install compass」でインストールを実行。

C:\Users\Ryuichi>gem install compass
Fetching: chunky_png-1.2.7.gem (100%)
Fetching: fssm-0.2.9.gem (100%)
Fetching: compass-0.12.2.gem (100%)
Successfully installed chunky_png-1.2.7
Successfully installed fssm-0.2.9
Successfully installed compass-0.12.2
3 gems installed
Installing ri documentation for chunky_png-1.2.7...
Installing ri documentation for fssm-0.2.9...
Installing ri documentation for compass-0.12.2...
Installing RDoc documentation for chunky_png-1.2.7...
Installing RDoc documentation for fssm-0.2.9...
Installing RDoc documentation for compass-0.12.2...

Mac

「sudo gem install compass」でインストールを実行。

Private-Mac:~ ryuichi$ sudo gem install compass
Password:
Fetching: chunky_png-1.2.7.gem (100%)
Fetching: fssm-0.2.9.gem (100%)
Fetching: compass-0.12.2.gem (100%)
Successfully installed chunky_png-1.2.7
Successfully installed fssm-0.2.9
Successfully installed compass-0.12.2
3 gems installed
Installing ri documentation for chunky_png-1.2.7…
Installing ri documentation for fssm-0.2.9…
Installing ri documentation for compass-0.12.2…
Installing RDoc documentation for chunky_png-1.2.7…
Installing RDoc documentation for fssm-0.2.9…
Installing RDoc documentation for compass-0.12.2…
Private-Mac:~ ryuichi$

5, Sublime Text 2とパッケージのインストール

ここからはSublime Text 2を使った設定になります。
まだ利用されていない方はこちらの記事「【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】」を参考に「必須、パッケージコントロールのインストール」の項を済ませてください。

この手順はWindows、Mac共に共通です。

コマンドパレットを開きパッケージインストールを実行

Shit + Control + pキーを押してコマンドパレットを開きます。

SublimeText2：パッケージコントロールを開く

コマンドパレットを開いたら「Package Control」と入力してInstall Packageを選択しましょう。

Compassのパッケージを選択してインストール

「Compass」とパッケージ名を入力してインストールします。

Compassパッケージのインストール

パッケージの準備は完了です。
これ以外に、以下のパッケージをインストールしておくと便利かもしれません。

Sass
SCSS
SCSS Snipets

6, プロジェクトの作成

プロジェクトを作成しましょう。
簡単にテストをするために、以下の構成でディレクトリを作成しファイルを用意しました。

css/
scss/
- sample.scss
config.rb

Sublime Text 2の「Project > Add Folder to Project...」から上記で作成したディレクトリを選択します。

プロジェクトの保存

作成したプロジェクトを「Project > Save Project As...」で任意の場所に保存します。

7, config.rbの作成

上記の構成にあるconfig.rbを作成します。
config.rbはSass, Compassを制御するための設定ファイルです。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
output_style = :nested
line_comments = false

今回は動作確認を優先するので、この程度で十分でしょう。
より細かい制御をしたい場合はこちらの記事を「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜設定ファイルを知っておこう – 番外編」参考にしてみてください。

8, コンパイルの実行

最後に、Sublime Text 2でビルド設定を変更します。
「Tools > Build System > Compass」を選択します。

これで準備は完了です！

コンパイルするためのSCSSを記述する

sample.scssに適当にCSSとMixinを記述してみましょう。

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
@import "compass";

a
{
	width:500px;
	overflow:auto;
	@include box-shadow(1px 1px 0 #ccc);
}

コンパイルを試してみる

Control + bを押してコンパイルを実行します。
実行後は常時監視となるので、キーを押す必要はなくなり保存するだけで大丈夫です。

以下のようになっていれば無事コンパイルが実行されています。

コンパイルの実行

C:\Users\Ryuichi\AppData\Roaming\Sublime Text 2\Packages\Compass>compass watch H:\pj\web_acceleration_sample 
>>> Change detected at 18:18:12 to: sample.scss

Dear developers making use of FSSM in your projects,
FSSM is essentially dead at this point. Further development will
be taking place in the new shared guard/listen project. Please
let us know if you need help transitioning! ^_^b
- Travis Tilley

overwrite sample.css 
>>> Compass is polling for changes. Press Ctrl-C to Stop.

コンパイル後のCSS

sample.cssを確認してみましょう。

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
a {
  width: 500px;
  overflow: auto;
  -webkit-box-shadow: 1px 1px 0 #cccccc;
  -moz-box-shadow: 1px 1px 0 #cccccc;
  box-shadow: 1px 1px 0 #cccccc; }

CompassのMixinsもしっかり動いているようです。