SassとCompassの導入方法（Windows、Mac）

いまさらですが、SassとCompassの環境を導入しました
以前から使いたいなとは思っていたのですが、体制や運用面でのネックがあったりして見送っていました
ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました

前置きはさておき、今回は環境構築についてです
私の作業環境がときにWindowsだったりMacだったりと『アホか！』な感じなので、両方の方法について書いてます
なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです…

Rubyのインストール

Macは最初から入っているようですが、Windowsはインストールしなければいけないようです
Windowsユーザは、下記URLからダウンロードしてください

RubyInstaller

次に、念のためRubyがインストールされているかと、バージョンを確認しましょう

■Windows
『コマンドプロント』を起動
※「スタート」→「すべてのプログラム」→「アクセサリ」→「コマンドプロンプト」 などで開けま

下記を実行

1
ruby -v

インストールしたバージョンが表示されたらOKです

1
ruby 2.0.0p0

■Mac
『ターミナル』を起動
下記を実行

1
sudo ruby -v

こちらもインストールされているバージョンが出るかと思います

Compassのインストール

『コマンドプロント ore ターミナル』で下記を実行します
・RubyGemを最新にアップデート

1
gem update --system

・Sassのインストール

1
gem install sass

・Compassのインストール

1
gem install compass

これで、Compassを使えるようになったはずです

Compassを使う

流れとしては、
１．『コマンドプロント』などでCompassを使いたい階層に移動
２．config.rb というCompassの設定ファイルを作る
３．監視を開始する
という感じです。
※黒い画面を使わない人なので、この辺りが個人的に一番はまったところです…

■Windows、Mac
『コマンドプロント or ターミナル』を開き、監視したい階層に移動する

1
cd

※cdのあと半角スペース入ります
と入力してから、Compassを使いたいフォルダを『コマンドプロント or ターミナル』にドラッグ＆ドロップしてください
自動でcd の後にフォルダのパスが入力されたと思うので、Enterを押せば設定完了です

続いて、下記を実行すれば設定ファイルやらsassデータなどが自動で作成されます

1
compass create

次のようなデータが作成されているはずです

1
2
3
4
5
6
7
8
sass
　└ ie.scss
　└ print.scss
　└ screen.scss
stylesheets
　└ ie.css
　└ print.css
　└ screen.css

最後に次のコマンドを実行すれば監視がはじまります

1
compass watch

これで、scssファイルを編集して保存すれば自動的に、stylesheets下のcssファイルが上書きされていきます（ディレクトリがデフォルトの場合）
Compassを停止するときは、『コマンドプロント or ターミナル』で　Ctrl ＋ c を押してください
※windowsの場合は、さらに “終了しますか (Y/N)?”と続くので、Yを入力してエンターを押してください

使い始めが面倒なので、簡単に監視を開始させる

これで基本的に使えるようになったのですが、もっと簡単に使いたいので、「バッチファイル」や「シェルスクリプト」を作るとラクです

まずは、「config.rb」や「scss」ファイルなどを事前に用意しておきます
これらのファイルは使いまわすことができるので、一度作ったものをテンプレートとしてもっておけば便利です
テンプレート化する際に、「config.rb」の設定を各自のルールにあわせてみてください

基本的な設定項目は次のようになるので、ファイルの格納場所やcssの出力形式など設定しましょう

1
2
3
4
5
6
7
http_path = "/"  //サイトのパス
css_dir = "common/css"  //CSSを書きだす場所
sass_dir = "common/scss"  //SCSSの保存場所
images_dir = "common/images"  //画像ディレクトリ
javascripts_dir = "common/js"  //Javascriptの場所
output_style = :expanded  //CSSの書き出し形式設定。圧縮させたりなどできます
line_comments = false  //CSS に SCSS の行番号を出力するかどうかの設定

■Windows
テキストエディタなどで下記を記述ファイルを“compass_start.bat”などの名前をつけて「config.rb」と同じディレクトリにおいてください

1
compass watch

実行すれば、コマンドプロンプトが開始され監視がはじまります

■Mac
テキストエディタなどで下記を記述ファイルを“compass_start.command”などの名前をつけて「config.rb」と同じディレクトリにおいてください

1
2
3
4
#!/bin/bash
htdocs=$(dirname $0)
cd $htdocs
compass watch

実行すれば、ターミナルが開始され監視がはじまります

Dreamweaverでコードヒントを使えるようにする

※MacではDreamweaverを使っていないのでWindowsのみになります。ご了承ください
参考：【sass,scss】DreamweaverCS4でコードヒントを使う

【CS5以降】
c:\ユーザー名/AppData/Roaming/Adobe/Dreamweaver cs5/ja_JP/Configuration/DocumentTypes/MMDocumentTypes.xml

【CS4】
c:\Program Files/Adobe/Adobe Dreamweaver CS4/configuration/DocumentTypes/MMDocumentTypes.xml

のファイル内を以下のように修正してください

1
<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >

↓

1
<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" >

ついでに、lessを追加してもいいかもしれないですね
これで、コードヒントが使えようになっていると思います

黒い画面はイヤな場合

わざわざターミナルなどを使わなくてもKoalaやScoutなどのアプリなどを使えばいいみたいです
今回はコマンドになれるいい機会でしたので、王道で環境構築しました
黒い画面に抵抗がある、自信がない人などはこちらのアプリを検討してみてください

おわりに

長々となりましたので今回は具体的なsassの使い方については省略します

なお、Sass,Compass導入部分については下記ページを参考にさせていただきました
Compassを使ってSassのCSS出力を手軽にしよう
Sass + Compass の基本導入と設定ファイル config.rb について
WindowsにCompassをインストールしてSASS/SCSS環境を構築する