いい加減ちゃんと覚えよう。こんどこそ。

とりあえず自宅でも会社でも環境を構築できるようにやったことをメモ。

とりあえずやったこと

• Sassのインストール
• Compassのインストール
• SublimeText2で使えるようにパッケージをインストール

SassとCompassのインストール

なんか、Rubyが必要らしいんですが、MacははじめからRubyが入ってるんでガンガンコマンド打ってけばいいらしです。

ということでターミナルを開いてどんどん入力していきます。

まずはMacのgemをアップデート。

続いて、Sassをインストール

最後にCompassをインストール

Sublime Text2のパッケージを追加

Cmd+Shift+Pでパッケージコントロールを開いて、installと入力するとインストールできるパッケージが出てくるので、更に以下のパッケージ名を入力して検索しインストール。

1. Sass
2. Sass Build
3. SCSS
4. SCSS Snippets
5. Compass

らしいのですが、なんかいくら検索しても「SCSS」だけ見つからない。でもなんか動いてるので大丈夫…なんかな？よくわかりません。この状態だと、作業自体は問題なく行えるようですが、自動補完機能が働きませんので、ちょっとだけ不便になるかもしれません。書式が近いSassモードにしておくと@include foobar なんかの補完はできますが、、SCSSの書き方じゃ行末の「；」が自動的に入力されず、ビルドした時にエラーを吐いたりします。

とりあえずは、どちらか使いやすい方を使用して、足りない部分は自力でなんとかしていくしかないのかな？（CSSモードで@includeは自力で書くとか、Sassモードで「；」を忘れずに書く癖をつけるとか。

（6/3追記：ここから）

SCSSパッケージの追加方法

パッケージコントロールからのインストールがうまくいかなかったので、Githubから直接インストールします。

Githubの上の方にある「ZIP」からダウンロードしてインストールするか、ページをスクロールした先にある、README.markdownのなかにあるGitまたはDownloadの項目に従います。

Gitを使ってクローンする

Gitが入ってる場合は、SublimeText2のパッケージが入ってるフォルダに入り、

としてクローンします。

このままだと、SCSS-sublimeというフォルダにクローンされてしまいますが、SCSSというフォルダにクローンしたいので、フォルダ名を指定してクローンします。

やりかたは、

git clone <リポジトリURL> <作成するディレクトリ名>

だそうですので、結果、上に書いたとおりにすればOKということですね。

手動でZIPファイルをダウンロードしてインストールする

GithubのREADME.markdownを更に下に進めると、「Download」という項目があります。

そこの、「１．Download this ZIP file」か、Githubのページの上の方にある「ZIP」というリンクをクリックすると、ZIPファイルがダウンロード出来ますので、解凍します。

出来たフォルダは「SCSS」にリネームしておきます。

次に、Sublime Text2 を起動して、メニューから「Preferences→Browse Packages」を選択すると、パッケージフォルダが開きますので、そこに今作ったSCSSフォルダを丸ごと移動します。

最後にSublime Text2を再起動すればOKです。

成功していれば、ウィンドウ右下の「HTML」とか「CSS」とかかれているところをクリックしてでてくる一覧から「SCSS」を選ぶか、Command + Shift + P を押してから、「ssscss（Set Syntax:SCSS）」と入力すればシンタックスモードがSCSSに切り替わるはずです。

（6/3追記：ここまで）

プロジェクトの設定を行う

実際に使用するには、Sass用の設定ファイル（config.rb）の用意と、フォルダをプロジェクトとして登録する必要があるらしい。

config.rbは、じつはターミナルからcompass createすると作ってくれるらしいんですが、フォルダの階層とかを変える場合コマンドが長くなってきてめんどいのでこれは使わずに、手動で作りました。とりあえず最低限必要そうなとこだけ。

自分はWordPressのテーマを作るのがメインになりますので、こんな設定にしといてコピペで使いまわす予定。

output_styleは製作中は :expanded 最終的には :compactか :compressed がいいなんて言いますけど、:expanded で出しちゃうと、間違えてCSSファイル側を修正してしまい、SCSSを変更したらそこも上書きで巻き戻るなんてことも考えられますので、基本的にCSSファイルは弄らずかならずSCSSから変更するというルールぎめをしたうえで :compact か :compressed にしておくのがいいんじゃないのかなぁと考えています。（自分的には）

config.rbはホントはもっといろいろ設定できるし、設定したほうがいいのかもしれませんが、はじめからあまりいろいろ手を出しても分からなそうなので、ほんとに必要な分だけ設定することにしました。

もっと細かいことはこことかに詳しく載っています。

プロジェクトを保存し、実際に使いはじめる

作業してるフォルダをサイドバーにドロップしてからProject→Save Project As…としてプロジェクトを保存。

あとは、Scssフォルダをつくってその中に適当に「.scss」ファイルを作り、ST2のToolsにあるBuild SystemからCompassを選択。

それからToolsのBuild（またはCmd+B）でビルドするとウィンドウの下にログ画面っぽいのが出てきて、対応するCSSが作られました。

以降はこのフォルダを自動的に監視してscssファイルが更新されると自動的にcssも更新されるみたいです。楽ちんですね。

あと、当たりまえのことですけど、日付をまたいで作業するとか、途中でパッケージを入れ替えたりしてSublimeText2を再起動をした場合なんかは、１回目は手動でビルドしないと監視体制にはいりませんので保存しても全然反映されないよーという場合はそこを疑って下さい。

自分はそれで何回か焦りましたｗ

ちょっと気になったこと

ただ、CSSの場合は保存したらそれでおしまいですけど、Scssの場合、一度CSSに変換する必要が有るため、フォルダを監視して自動変換するにしても、保存からの変換というプロセスがあるので、ちょっとだけ時間がかかります。

パラメータをいろいろ弄って検証するときとか、CSS保存、すぐCmd＋Tabでブラウザへ移動、すかさずリロードなんてやってるとたまに反映が遅れたりするのでそこだけなれるまではもにょもにょするかもしれませんね。

多分慣れの問題だとは思いますが…。