[vim]sass(scss)を自動コンパイルできるようにしてcss編集を効率化する
昨日の記事でhtmlマークアップを効率化したので、今回はcss周りを効率化してみます。
- sassインストール
gem install sass- compassインストール
gem install compassrbenvをお使いの方は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の開発環境が整いました。