SassとCompassを使うとコーディング作業がすこぶる捗りますが、コンパイルが少々面倒なのがネックです。
ターミナルコマンドでのコンパイルは複数ディレクトリのコンパイルには不向きだし、GUIアプリケーションは起動とプロジェクト毎の設定が億劫です。
そんな中、SublimeTextでのコンパイルが思いの外便利だったので、MacOSにおけるSass/Compassの導入方法と便利な機能を備忘録を兼ねて紹介します。
SassとCompassをインストール
|
1 2 |
sudo gem install sass sudo gem install compass |
※9月16日現在、上記コマンドでMac OSX 10.11(El Capitan)にインストールすることはできませんが、-nでバイナリファイルの場所を指定するとインストールできます。
|
1 2 |
sudo gem install -n /user/local/bin sass sudo gem install -n /user/local/bin compass |
SublimeTextの設定
パッケージのインストール
・Sass
・SASS Build
・SCSS
・Compass
Macの場合は、コマンドパレットからList PackageでCompassを選択し、ファイル“Compass.sublime-build”にosxを追加する。
※USERNAMEの箇所は自分のユーザー名が入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "osx": { "path": "/usr/local/bin:/Users/USERNAME/.rbenv/shims:$PATH" }, "cmd": "sh '${packages}/Compass/build.sh' '${file_path}' '${project_path:${folder}}'", "working_dir": "$packages/Compass", "selector": "source.sass, source.css", "shell": "true", "windows": { "cmd": "build.cmd \"${file_path}\" \"${project_path:${folder}}\"" } } |
“config.rb”を設置
プロジェクトのルートにconfig.rbを作成し、下記の内容を記述。
|
1 2 3 4 5 6 7 |
http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js" output_style = :expanded line_comments = false |
※css_dirにはcssファイルの出力先ディレクトリを、sass_dirにはsassまたはscssファイル格納ディレクトリを設定します。
上記設定でのフォルダ構成例
|
1 2 3 4 5 6 7 8 9 10 11 |
■プロジェクトルート │ ├─config.rb │ ├─css │ ├─images │ ├─js │ └─sass |
Sassファイルの編集とコンパイル
config.rbで指定したsassファイル格納ディレクトリに、.sassまたは.scssを作成し、編集します。
コンパイル（ビルド）はコマンド＋Bで行います。
コンパイルに成功すると、config.rbで指定したcss格納ディレクトリに.cssが作成されます。
次のページではSassの便利な機能について紹介します。
1 2