Hatena::Groupsubtech

#生存戦略 、それは

-> 06 { 08 / 01 }

css で変数を使う

13:26 | はてなブックマーク - css で変数を使う - #生存戦略 、それは

ERb に喰わせて保存時 hook ればいけね、と思ったので昼休みにやってみた。できた。ERb の syntax が高級すぎてめどい、とかあるけど。

ダサイところが今のところ拡張子 .css が決めうちなのでコンパイラ通す前のテンプレート css が同一階層ディレクトリに残ってしまう。

~/.vim/plugin/css_pre_compile.vim

if v:version < 700 || (exists('g:loaded_css_pre_compile') && g:loaded_css_pre_compile || &cp)
  finish
endif
let g:loaded_css_pre_compile = 1

if !exists('g:css_pre_compile_ruby')
  let g:css_pre_compile_ruby = '/usr/bin/env ruby'
endif

if !exists('g:css_pre_compile_name')
  " example *.pre.css
  let g:css_pre_compile_name = 'pre'
endif

function! s:CssPreCompile()
  let filename = expand('%:p')
  let compiled_filename = substitute(filename, '\.' . g:css_pre_compile_name . '\.css$', '.css', '')
  call system(g:css_pre_compile_ruby . ' -r erb -e "puts ERB.new(IO.read(%Q{' . filename . '})).result" > ' . compiled_filename)
endfunction

exe 'autocmd BufWritePost *.' . g:css_pre_compile_name . '.css call <SID>CssPreCompile()'

で、デフォルトだと *.pre.css を保存すると ERb が走って *.css ができあがる。ただエラー周り何にも行ってないので、ERb の syntax error がおきると css が真っ白になる、けどまぁ。

foo.pre.css

<%
  line = '3px solid red'
%>

pre {
  border: <%= line %>;
}

保存後、foo.css



pre {
  border: 3px solid red;
}

みたいな。