zencodingcss.vim (Vim Scirpt)

Sparkup （Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力）の vim plugin を参考にして CSS 用の Zen Coding 入力 vim script を作成しました。

<c-e> を押すことで、キーワード (Alias) から CSS のプロパティと値を自動で入力できます。
デフォルト設定では、Zen CSS Propaties の Alias が登録されています。
さらに、.vimrc に設定を記述することで Alias を追加・上書きすることができます。

使用方法

  • ノーマルモードでの Alias 文字列（行頭・行末・空白文字で区切られた文字列）上、またはインサートモードでの Alias 文字列末尾にカーソルがある状態で <c-e> を押すと Alias 文字列が対応する CSS プロパティ・値に変換されます。
  • 変換された文字列に :; や () がある場合は ; や ) の前にカーソルが移動しインサートモードになります。
  • 変換後文字列に | がある場合は | が削除され、その位置にカーソルが移動しインサートモードになります。
  • ユーザー定義 Alias 設定内で、文字列をバックスラッシュ(\) で囲むことでラベル付きプレースホルダを作ることができます。<c-n> を押すとプレースホルダが削除され、その位置にカーソルが移動しインサートモードになります。
  • その他の場合は、行末にカーソルが移動しノーマルモードになります。
  • <c-n> を押すとカーソル位置以降の :;, (), | を探してその位置に移動し、上述のような各文字に対応した動作をします。

※ :; は g:zencodingcssSeparation で指定した文字を間に挟んだ場合も動作します。

入力例

fl       <= Alias 文字列 fl 上にカーソルがある状態で <c-e> を押すと
            以下の文字列が自動的に入力されて、; の前にカーソルが配置される。
float: ;

float: left;  <= left は自分で入力する
                （left も自動入力するには Alias 文字列に fl:l を入力する）

float: left; c    <= c の上にカーソルがある状態で <c-e> を押すと
                     以下の文字列が自動的に入力されて、) の前にカーソルが配置される。
                     以下は g:zencodingcssColorFormat を設定して rgb() が値として入力されるように変更している。
float: left; color: rgb();

設定パラメータ・設定方法

g:zencodingcssExecuteMapping
Alias を展開するキーを指定する。
デフォルトは <c-e>

if !exists('g:zencodingcssExecuteMapping')
    let g:zencodingcssExecuteMapping = '<c-e>'
endif
g:zencodingcssNextMapping
次の入力位置（:;, (), |）に移動するキーを指定する。
デフォルトは <c-n>

if !exists('g:zencodingcssNextMapping')
    let g:zencodingcssNextMapping = '<c-n>'
endif
g:zencodingcssSeparation
プロパティ名の後の : の後に入れる文字列（スペース等）を指定する。
デフォルトでは '' のため : の後にカーソルが配置されたり、: と値の間にスペースが入りません。

if !exists('g:zencodingcssSeparation')
    let g:zencodingcssSeparation = ' '
endif
g:zencodingcssColorFormat
入力されるカラー文字列（前景）を指定する。
デフォルトは #000

if !exists('g:zencodingcssColorFormat')
    let g:zencodingcssColorFormat = 'rgb()'
endif
g:zencodingcssBackgroundColorFormat
入力されるカラー文字列（背景）を指定する。
デフォルトは #FFF

if !exists('g:zencodingcssBackgroundColorFormat')
    let g:zencodingcssBackgroundColorFormat = 'rgb()'
endif
g:zencodingcssUserDict
ユーザー定義の Alias と、その展開文字列を指定する。

if !exists('g:zencodingcssUserDict')
    let g:zencodingcssUserDict = {
\   'wh'    : 'width: |px; height: |px;',
\   'mp0'   : 'margin: 0; padding: 0;',
\   'bg'    : 'background: rgb(|, |, |) url() repeat-x left top scroll;',
\   'f'     : 'font: \style:italic?\ \variant:small-caps?\ \weight:bold?\ \size:100%\\/line-height:1em?\ \family:sans-serif\;',
\   'wbs'   : '-webkit-box-shadow: \offset-x\px \offset-y\px \blur\px rgb(|, |, |);',
\   'hpx'   : 'height: |px;',
\   'wpx'   : 'width: |px;'
\}
endif

ダウンロード

vim-zencodingcss.zip(13KB)

更新履歴

ver 0.2 (2010/2/23)
  • ラベル付きプレースホルダ機能追加
ver 0.1 (2010/2/22)
  • 初公開
最終更新日 2010年02月23日