Windows で Compass を使ってみた

2015年11月24日 2017年8月8日

ご利用のブラウザは、JavaScript が無効となっていませんか？
このサイトでは、コンテンツの一部が非表示、あるいは、コメント、お問い合わせの投稿ができない、検索ができないことがあります。

今回は、Windows で Compass を使ってみました。

Compass とは、
Sass（サス、Syntactically Awesome Stylesheets）で記述されたファイルをコンパイルし、CSS へ変換する ruby ベースのツールです。
Sassは、当初、字下げを用いたインデント構文を用いていましたが、最新では、セミコロン、波括弧を用いたブロック書式を用いるようになりました。それらを区別するために拡張子を前者は、.sass 、後者を .scss とするようになっています。
プログラム言語をご存知なら、前者は、文字位置に意味を持たせる Python に、後者は、C/C++,Java,PHP などの {} で括る言語によく似ています。

CSS は、通常、微妙に異なる定義の繰り返しがあった場合、何度も同じような記述する必要があります。そこで、 Sass では、先の微妙に異なる条件を記述することで、プログラミングのように記述することができます。その Sass ファイルをコンパイル（解析）し、CSSファイルを出力してくれる非常に便利ツールです。

では、早速、インストールから簡単な使い方までを解説してみます。

目次
履歴

2015年11月24日初版

Compass を Windowsへインストールするには

先にも書いたように Compass は、Ruby ベースのアプリケーションです。まずは、Ruby のインストールが必要になります。

Ruby for Windows をダウンロード

http://rubyinstaller.org/downloads/ から最新の Ruby ダウンロードします。

最新(2015.11)は、 2.2.3 のようです。
64bit版は、Ruby 2.2.3 (x64) をダウンロードします。

Ruby for Windows をインストール

先にダウンロードした rubyinstaller-xxx.exe をダブルクリックなどで起動します。

ここでインストーラで表示する言語を指定します。ここでは、日本語を選択し、OKをクリックします。
使用許諾では、”同意する” をチェックし、 “次へ” をクリックします。
インストール先ディレクトリを指定し、 “インストール” をクリックします。

ここで “Ruby の実行ファイルへ環境PATHを設定する” をチェックしておくと、後でコマンドラインからruby を起動する際、パスの設定を設定をしなくて良くなるので、他のバージョンの ruby をインストールしていない限りは、“Ruby の実行ファイルへ環境PATHを設定する” もチェックしておきましょう。

インストールを開始すると上記の画面が表示されます。
正常にインストールが完了すれば、以下の画面が表示され、”完了”をクリックし終了です。
Rubyが正しく起動できるか確認します。

Dosプロンプトを起動し、以下のように Ruby のバージョンを出力を実行してみてください。
Rubyのバージョンが正しく出力されればOKです。
> ruby -v ruby 2.2.3p173 (2015-08-18 revision 51636) [i386-mingw32]

Compass をインストール

Rubyを最新版へ更新します。

Dosプロンプトを起動し、以下のように Ruby のアップデートコマンドを実行します。
> gem update --system
Compassをインストールします。

Dosプロンプトから以下のように入力し、Compassをインストールします。
> gem install compass

Compass が正しく起動できるか確認します。

Dosプロンプトから以下のように Compass のバージョン出力を実行してみてください。
Compassのバージョンが正しく出力されればOKです。

> compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

Compass を使ってみる

先の手順にて Compass のインストールが正しく行えたら、実際に Compassを使ってみましょう。

前準備

Rubyでの環境設定は、各ディレクトリの配下に config.rb を設置することで行います。
ここでは、D:\ruby\compass\test というディレクトリを作成し、そこにconfig.rbを設置してみます。

#  ディレクトリを作成します。
> mkdir D:\ruby\compass\test

#  カレントディレクトリを移動します。
> cd D:\ruby\compass\test

#  notepad を起動し、config.rbを編集します。
D:\ruby\compass\test> notepad .\config.rb

config.rbには、以下のように記述、保存します。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

最後にこのディレクトリを compassで使えるように必要なディレクトリを作成します。

#  compassの新しいプロジェクトを作成します。
D:\ruby\compass\test> compass create
...

デフォルトで以下のファイルが作成されます。不要な場合は、削除してもOKです。

D:\ruby\compass\test> dir /b scss\
ie.scss
print.scss
scss.scss

D:\ruby\compass\test> dir /b css\
ie.css
print.css
scss.css

SCSS 形式をためしてみる

テスト用に以下のSCSS 形式のファイル( “scss\test.scss” )を作成します。

$blue: #0000ff;
$margin: 16px;
 
.class_a {
  padding: $margin / 4;
  margin: $margin / 4;
  border-color: $blue;
  p {
     padding: $margin;
  }
}
 
.class_b {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
  p {
     padding: $margin / 2;
  }
}

上記のSCSS 形式のファイル( “scss\test.scss” )をコンパイルしてみます。

D:\ruby\compass\test> compass compile scss/test.scss
    write css/test.css

コンパイル結果としての cssファイルは、”css\test.css” として出力されます。

/* line 6, ../scss/test.scss */
.class_a {
  padding: 4px;
  margin: 4px;
  border-color: #0000ff;
}
/* line 10, ../scss/test.scss */
.class_a p {
  padding: 16px;
}
 
/* line 15, ../scss/test.scss */
.class_b {
  padding: 8px;
  margin: 8px;
  border-color: #0000ff;
}
/* line 19, ../scss/test.scss */
.class_b p {
  padding: 8px;
}

こんな感じで出力されればOKです。

SASS 形式をためしてみる

テスト用に以下のSASS 形式のファイル( “scss\test2.sass” )を作成します。

$blue: #0000ff
$margin: 16px
 
.class_a
  padding: $margin/4
  margin: $margin/4
  border-color: $blue
  p
    padding: $margin
 
.class_b
  padding: $margin/2
  margin: $margin/2
  border-color: $blue
  p
    padding: $margin/2

上記のSASS 形式のファイル( “scss\test2.sass” )をコンパイルしてみます。

D:\ruby\compass\test> compass compile scss/test2.sass
    write css/test2.css

コンパイル結果としての cssファイルは、”css\test.css” として出力されます。

/* line 4, ../scss/test2.sass */
.class_a {
  padding: 4px;
  margin: 4px;
  border-color: #0000ff;
}
/* line 8, ../scss/test2.sass */
.class_a p {
  padding: 16px;
}
 
/* line 11, ../scss/test2.sass */
.class_b {
  padding: 8px;
  margin: 8px;
  border-color: #0000ff;
}
/* line 15, ../scss/test2.sass */
.class_b p {
  padding: 8px;
}

こんな感じで出力されればOKです。
SCSSと同様の出力になっているはず？ですので、細かい点でも確認されてみると良いと思います。

（おまけ）トラブルシューティング

“Individual stylesheets must be in the sass directory.” と出力されたら

> compass compile scss/test2.sass
Individual stylesheets must be in the sass directory.

Compass のコンパイルを実行した際、上記のようなエラーが出力された場合、 config.rb で指定したディレクトリに sass ファイル or scss ファイルが設置されているか確認してみましょう。

...
sass_dir = "scss"
...

config.rb のように設定されていれば、カレントディレクトリ\scss 配下に sass ファイル or scss ファイルが設置されていなければなりません。

” `initialize’: No such file or directory…” と出力されたら

> compass compile scss/test2.sass
    error sass/test.scss (C:/Ruby22/lib/ruby/2.2.0/tempfile.rb:136:in `initialize': No such file or directory @ rb_sysopen - D:/ruby/compass/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/bbbbbbbbbbbbbbbbbb/.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/general/_hacks.scssc20151124-2232-1jfvp94)
Compilation failed in 1 files.

これは、（Windowsの場合）ほとんどがパスの長さが長すぎてファイルの作成ができないということが原因でしょう。さらにはキャッシュパスが原因がほとんどです。この場合、config.rb へキャッシュパスをもっと短いパスを指定してあげるとうまくいくことがあります。

...
cache_path = "D:/temp"
...

デフォルトでは、カレントディレクトリ配下へキャッシュディレクトリおよびファイルが作成されます。上記のconfig.rb のように設定すれば、キャッシュディレクトリのルートディレクトリは “D:/temp” となり、パスの長さを縮めることができ、先のエラーが解消されることがあります。

いかがだったでしょうか？
Compass は、プログラミングをやったことがある方には、非常に便利なCSS作成ツールです。 Rubyを知らなくても Windowsで気軽に使えるようにもなっています。

個人的に、CSSファイルを直に記述していたころは、似たような設定を何度も記述する必要がある箇所が複数あると、漏れが出て、確認作業も大変になり時間的なロスは大変なものでした。

まだ Compass を利用されたことがない方には、ぜひ、おすすめツールです。

(amazon )	インフラエンジニア教本2――システム管理・構築技術解説 (SoftwareDesign別冊)に寄稿しました。「ログを読む技術」の再掲載になります。 8月号を見逃された方は、是非、ご一読くださいませ。
(amazon )	Software Design 8月号に寄稿しました。「ログを読む技術」について寄稿しました。興味のある方は、是非、ご一読くださいませ。
また、執筆や当サイトにおける広告のご依頼などございましたら、お問い合わせページよりご一報ください。

Windows で Compass を使ってみた

Compass を Windowsへインストールするには

Ruby for Windows をダウンロード

Ruby for Windows をインストール

Compass をインストール

Compass を使ってみる

前準備

SCSS 形式をためしてみる

SASS 形式をためしてみる

（おまけ）トラブルシューティング

“Individual stylesheets must be in the sass directory.” と出力されたら

” `initialize’: No such file or directory…” と出力されたら

最近投稿の記事

さくらのVPS 全プランリニューアルです。（石狩(北海道)も選択可）

カテゴリ

Serverman@VPS 完全1ヶ月無料キャンペーン実施中です。

リンク

KVM採用 ConoHa VPSは、時間単位で借りれる便利なVPSです。

KVM採用お名前.com VPS(KVM) 2G プラン初期設定費無料キャンペーン実施です。

Windows で Compass を使ってみた

Compass を Windowsへインストールするには

Ruby for Windows をダウンロード

Ruby for Windows をインストール

Compass をインストール

Compass を 使ってみる

前準備

SCSS 形式をためしてみる

SASS 形式をためしてみる

（おまけ）トラブルシューティング

“Individual stylesheets must be in the sass directory.” と出力されたら

” `initialize’: No such file or directory…” と出力されたら

最近投稿の記事

さくらのVPS 全プラン リニューアルです。（石狩(北海道)も選択可）

カテゴリ

Serverman@VPS 完全1ヶ月無料 キャンペーン実施中です。

リンク

KVM採用 ConoHa VPSは、時間単位で借りれる便利なVPSです。

KVM採用 お名前.com VPS(KVM) 2G プラン 初期設定費無料 キャンペーン 実施です。

Compass を使ってみる

さくらのVPS 全プランリニューアルです。（石狩(北海道)も選択可）

Serverman@VPS 完全1ヶ月無料キャンペーン実施中です。

KVM採用お名前.com VPS(KVM) 2G プラン初期設定費無料キャンペーン実施です。