MACH3

MACH3.laBlog

WEB屋の音速実験室

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

個人的な話ではありますが、先日ようやくはじめての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
26
27
28
syn match sassVariable "$[[:alnum:]_-]\+"
syn match sassVariableAssignment "\%([!$][[:alnum:]_-]\+\s*\)\@<=\%(||\)\==" nextgroup=sassCssAttribute skipwhite
syn match sassVariableAssignment "\%([!$][[:alnum:]_-]\+\s*\)\@<=:" nextgroup=sassCssAttribute skipwhite

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

26
27
28
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もこれくらい気の利いたツールにしてみたい…

Share |

コメント (0件)

コメントはないみたいです。

コメントを投稿する

入力されたメールアドレスは公開されません。


*

「東北地方太平洋沖地震」義援金支援(Yahoo!基金)