SublimeText3でSassとCompassを使う

おだむら — Tue, 15 Sep 2015 23:11:47 +0000

SassとCompassを使うとコーディング作業がすこぶる捗りますが、コンパイルが少々面倒なのがネックです。
ターミナルコマンドでのコンパイルは複数ディレクトリのコンパイルには不向きだし、GUIアプリケーションは起動とプロジェクト毎の設定が億劫です。
そんな中、SublimeTextでのコンパイルが思いの外便利だったので、MacOSにおけるSass/Compassの導入方法と便利な機能を備忘録を兼ねて紹介します。

SassとCompassをインストール

sudo gem install sass
sudo gem install compass

※9月16日現在、上記コマンドでMac OSX 10.11(El Capitan)にインストールすることはできませんが、-nでバイナリファイルの場所を指定するとインストールできます。

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の箇所は自分のユーザー名が入ります。

{
  "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を作成し、下記の内容を記述。

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ファイル格納ディレクトリを設定します。

上記設定でのフォルダ構成例

■プロジェクトルート
     │
     ├─config.rb
     │
     ├─css
     │
     ├─images
     │
     ├─js
     │
     └─sass

Sassファイルの編集とコンパイル

config.rbで指定したsassファイル格納ディレクトリに、.sassまたは.scssを作成し、編集します。

コンパイル（ビルド）はコマンド＋Bで行います。
コンパイルに成功すると、config.rbで指定したcss格納ディレクトリに.cssが作成されます。

次のページではSassの便利な機能について紹介します。

grotta blog » Compass

SublimeText3でSassとCompassを使う