Mach3.laBlog

VimでLessファイルを編集する(シンタックスの追加)

この記事は賞味期限切れです。(更新から1年が経過しています)

個人的な話ではありますが、先日ようやくはじめてのMacを手に入れました。
せっかく Less.app という素敵な物があるので、MacでもLessを使っていこうと思ったのですが、
Lessファイルを編集するのに丁度良いエディタに未だ出会えていないので、
とりあえずMacVimで編集してみようという試み。

VimでLessファイルを編集する

ちなみに、Windowsでは Notepad++ が使いやすくて重宝してます。

シンタックスファイルを追加する

Vimでは、Sassははじめから使えるのに
Lessのシンタックスファイルはありません。
なので、自分で追加してやらないといけません。

PHPでLessする「lessphp」の作者さんが、
オマケ?として公開してくれているので、こちらを使わせて頂くことに。

lessphp – leaner css in php

「Resources」の「Vim syntax file」から取得出来ます。
取得したless.vimは ~/.vim/syntax に保存。
これで、VimでLessファイルのシンタックスを色分けしてくれるようになったはず。

適当なLessファイルをひらいて

setf less

とかしてテストしてみましょう。

.lessファイルを関連付けする

.vimrc等で、lessファイルの関連付けをしてあげます。

" Less
au BufNewFile,BufRead *.less            setf less

これで拡張子が.lessのファイルを開くと、
lessのシンタックスハイライトが適用されてます。やったね!

less.vimが見つからなかった時は

Sassに比べていささかマイナーなツールではあるので、
そのような事もひょっとしたらあるかもしれません。
そんな時は、Sassの記法がかなり近いのでそちらを編集して使ってみてもよいかも。

基本的には複製させていただき、
変数の書き方だけLessに合わせておきます。

$ cd /Applications/MacVim.app/Contents/Resources/vim/runtime/syntax/
$ cat sass.vim > less.vim
$ vim less.vim

sass.vim を複製した less.vim を開き、

syn match sassVariable "$[[:alnum:]_-]+"
syn match sassVariableAssignment "%([!$][[:alnum:]_-]+s*)@<=%(||)==" nextgroup=sassCssAttribute skipwhite
syn match sassVariableAssignment "%([!$][[:alnum:]_-]+s*)@<=:" nextgroup=sassCssAttribute skipwhite

この部分の$を@に書き換える。

syn match sassVariable "@[[:alnum:]_-]+"
syn match sassVariableAssignment "%([!@][[:alnum:]_-]+s*)@<=%(||)==" nextgroup=sassCssAttribute skipwhite
syn match sassVariableAssignment "%([!@][[:alnum:]_-]+s*)@<=:" nextgroup=sassCssAttribute skipwhite

また、ファイル先頭のコメントの部分は、
適当にSassをLessに変更するなどしておきましょう。
これで、setf lessすればLessファイルとしてカラーリングされるようになるはずです。

一部の記法(Mixinとか)はSassとLessで異なるので反映されませんが、
個人的には変数とネストだけ反映されれば十分です。

「公開されているless.vimを紹介しておきながらなんでわざわざ?」と思われましたか?
…苦し紛れのコレを書いてる時にやっとless.vimを見つけたんだからしょうがない。

Less.appは素敵ですよ

いずれ改めて紹介しようとは思ってますが、
MacOSで使える LESS.app For Mac OS X は素晴らしいです。
フォルダごとに管理も出来るし、出力先のパスも指定できる。
Lessniumもこれくらい気の利いたツールにしてみたい…

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*