MacでSassを使える環境を構築する

Sublime Textで変換する

初めに Compassをインストールします。ターミナル起動して以下のコマンドを実行します。

sudo gem install -n /usr/local/bin compass

El Capitanでは新たに Rootlessというセキュリティ機能が実装されたようで「sudo gem install compass」のような従来の書き方ではインストールできないようです。

インストールが完了したら Compassのバージョンを確認します。

compass -v

Compassのバージョンが表示されたらインストールは成功です。

Sublime Textで変換をするには必要なパッケージをインストールする必要があります。Package Controlを起動して Sass、SASS Build、SCSS、SCSS Snippets、Compassをインストールします。パッケージのインストールが完了したら「Macintosh HD/Users/ユーザー名/Library/Application Support/Sublime Text 3/Packages/Compass/」へ移動して Compass.sublime-buildファイルを開きます。開いたファイルのコード内に以下の記述がない場合には追加します。

"osx": {
 "path": "/usr/local/bin:/Users/daisuke_miyazaki/.rbenv/shims:$PATH"
}

Macの Sublime Textで Sassファイルの変換を行うには Compassへのパスを指定する必要があり、この指定がない場合、変換時にエラーになります。

次に、Sublime Textの上部にあるメニューバーの「Project」から「Add Folder to Project」を選択して任意のフォルダを選択します。そのフォルダ内に Compassの設定ファイルを作成します。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
line_comments = false

Compassの設定ファイルの内容は、Sass用のディレクトリと変換した CSSファイルを出力するためのディレクトリを指定します。「line_comments」は変換・出力されたCSSファイル内のコードにコメントアウトで Sassのどの行に関する記述なのかを教えてくれるのですが必要ないので falseに指定しておきます。

最後に Sublime Textの上部にあるメニューバーの「Tools」の「Build System」から「Compass」を選択します。これで準備は完了です。Sassでコードを記述して Command + Bで設定ファイルに指定したディレクトリに変換された CSSファイルが出力・上書きされます。

Koalaで変換する

まずは、http://koala-app.com/へ行きアプリをダウンロードします。ダウンロードが完了したら Koalaを起動します。Koalaの GUIが表示されたら任意のフォルダをドラッグ&ドロップします。画面の左側にフォルダが表示されたらフォルダ上で右クリックで「プロジェクト設定」の「設定ファイルを作成」から「For Compass」を選択して作成された Compassの設定ファイルを編集します。設定ファイルの内容で注意するところは Sassファイルのディレクトリと CSSのディレクトリの指定です。

次に、画面の右側にある Scssのファイルをクリックして「自動コンパイル」にチェックを入れます。「オプション」と「アウトプットスタイル」も必要な項目にチェックを入れます。これで準備は完了です。エディタで Sassでコードを記述して保存すると自動的に CSSファイルが出力・上書きされます。