haya14busa

haya14busa’s memo

Stylus,nibのインストールとVimで自動コンパイル

- -

Install

まずはnode.js

$ brew install node

Stylusとnibのインストール

$ npm install -g stylus nib

これでOK

Vimで自動コンパイル

.vimrc

autocmd BufWritePost,FileWritePost *.styl silent !stylus <afile> -u nib >/dev/null

Node.jsで自動でコンパイルさせるとか,Stylus -wさせるとか色々方法はあると思うけど、Vimで設定しておくと手軽に使える.

本当はちゃんと条件分岐したほうがいいんだろうな…

Example

example.styl

@import 'nib'

.nib
    border-radius:10px

これを保存(:w)すると自動でexample.cssが生成されます.

example.css

.nib {
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

これだけだとnibの必要性薄そうに見えるけどglobal-reset()とかその他機能が目白押しで便利

for Emmet (zen-coding)

mattn/emmet-vim

.vimrc

autocmd BufRead,BufNewFile *.styl set filetype=sass

" let g:user_emmet_settings = {
" \  'styl' : {
" \    'filters' : 'fc',
" \  },
" \}

コメントアウトしてあるように、設定したりして見たのだけど、うまく*.stylファイルでちゃんとcssの設定に変わらないのでfiletype=sassにしてお茶を濁してます.というかfl:l|fc自体効かないので他がおかしいのかも…

Link

Comments