[vim]sass(scss)を自動コンパイルできるようにしてcss編集を効率化する


昨日の記事でhtmlマークアップを効率化したので、今回はcss周りを効率化してみます。

  • sassインストール
gem install sass
  • compassインストール
gem install compass

rbenvをお使いの方はrbenv rehashをお忘れなく。

毎回rehashを実行するのを忘れる方は「rbenv rehashを省略してくれるrbenv-gem-rehashでうっかりミスを防止する」を参考にしてみてください。

  • scssのサンプルをつくってみる
compass create scss_sample
cd scss_sample

以下のようなファイルが自動生成されています。

.
├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css
  • vim-sass設定

ファイル保存時にsassを自動コンパイルしてくれる便利プラグイン sass-compile.vim をインストールします。

# ~/.vimrc

NeoBundle 'AtsushiM/search-parent.vim'
NeoBundle 'AtsushiM/sass-compile.vim'

g:sass_compile_autoを1にして自動コンパイル設定を有効にしておきます。

# ~/.vimrc

"------------------------------------
" sass
"------------------------------------
""{{{
let g:sass_compile_auto = 1
let g:sass_compile_cdloop = 5
let g:sass_compile_cssdir = ['css', 'stylesheet']
let g:sass_compile_file = ['scss', 'sass']
let g:sass_compile_beforecmd = ''
let g:sass_compile_aftercmd = ''
"}}}
  • 自動コンパイルされるか確認

sample.scssを作成して保存してみます。

# sass/sample.scss

#main {
    width: 600px;
    p {
        margin: 0 0 1em;
        em {
            color: #f00;
        }
    }
    small {
        font-size: small;
    }
}

すると、stylesheets以下にsample.cssが生成されています!

# stylesheets/sample.css

/* line 1, ../sass/sample.scss */
#main {
  width: 600px;
}
/* line 3, ../sass/sample.scss */
#main p {
  margin: 0 0 1em;
}
/* line 5, ../sass/sample.scss */
#main p em {
  color: #f00;
}
/* line 9, ../sass/sample.scss */
#main small {
  font-size: small;
}

これでcssの開発環境が整いました。

参考