モノワスレ

ブログに書いて忘れましょう

Sublime text で SCSS 環境を作る (Windows)

Sublime Text 2 で Sass/compass のコンパイルができるパッケージ 『Compass』 « shilog の記事を参考に環境を作成させて頂きました。

前提

Sublime Text2 に Package Controll が入っていること

インストール

Ruby をインストールする
http://rubyinstaller.org/

C:\Users\name>ruby -v
ruby 1.9.3p392 (2013-02-22) [i386-mingw32]

Sass SCSS をインストールする

C:\Users\name>gem install sass
Fetching: sass-3.2.7.gem (100%)
Successfully installed sass-3.2.7
Installing ri documentation for sass-3.2.7
1 gem installed

C:\Users\name>gem install compass
Fetching: chunky_png-1.2.8.gem (100%)
Successfully installed chunky_png-1.2.8
Fetching: fssm-0.2.10.gem (100%)
Successfully installed fssm-0.2.10
Fetching: compass-0.12.2.gem (100%)
Successfully installed compass-0.12.2
Installing ri documentation for chunky_png-1.2.8
Installing ri documentation for fssm-0.2.10
Installing ri documentation for compass-0.12.2
3 gems installed

Sublime Text2 の パッケージコーントロールからインストールする (Ctrl+Shift+P) - Install Package

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

Sublime Text2 でプロジェクトを作成する
Project - Add to... 以下の構造のフォルダーを追加する
Project - Save as ... プロエクトを保存する

!! 注意 !! フォルダー名が日本語等のマルチバイトだとビルドされません。エラーも出ないからハマります。気をつけましょう。

/root
  /css
    sample.css ... config.rb の指定でビルドされるファイル
  /scss
    sample.scss 
  config.rb ... ビルドの設定

config.rb

http_path = "/"
css_dir = "css"
sass_dir = "scss"
output_style = :nested
line_comments = false

sample.scss

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
@import "compass";
 
a
{
    width:500px;
    overflow:auto;
    @include box-shadow(1px 1px 0 #ccc);
}

Tool - Build でビルドする(Tool - Build System - Compass が選択された状態)

C:\Users\name\AppData\Roaming\Sublime Text 2\Packages\Compass>compass watch C:\Users\name\Desktop\test\scss_test 
>>> Change detected at 15:03:38 to: sample.scss
   create sample.css 
>>> Compass is polling for changes. Press Ctrl-C to Stop.
/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
a {
  width: 500px;
  overflow: auto;
  -webkit-box-shadow: 1px 1px 0 #cccccc;
  -moz-box-shadow: 1px 1px 0 #cccccc;
  box-shadow: 1px 1px 0 #cccccc; }

後は、sample.scss を変更するとビルドされるようになる。