<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MacVim &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/macvim/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Wed, 03 Aug 2011 05:31:38 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>VimでLessファイルを編集する（シンタックスの追加）</title>
		<link>https://blog.mach3.jp/2011/08/03/edit-less-with-macvim.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Wed, 03 Aug 2011 05:31:38 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[LESS]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[MacVim]]></category>
		<category><![CDATA[Vim]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=1882</guid>

					<description><![CDATA[個人的な話ではありますが、先日ようやくはじめてのMacを手に入れました。 せっかく Less.app という素敵な物があるので、MacでもLessを使っていこうと思ったのですが、 Lessファイルを編集するのに丁度良いエ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>個人的な話ではありますが、先日ようやくはじめてのMacを手に入れました。<br />
せっかく <a href="http://incident57.com/less/">Less.app</a> という素敵な物があるので、MacでもLessを使っていこうと思ったのですが、<br />
Lessファイルを編集するのに丁度良いエディタに未だ出会えていないので、<br />
とりあえずMacVimで編集してみようという試み。</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh4.googleusercontent.com/-AKzjvfr6_RM/Tjjb-SHSQCI/AAAAAAAABVE/JBrE1WipE8I/201108031423.png" alt="VimでLessファイルを編集する"/></figure>



<p></p>



<p>ちなみに、Windowsでは <a href="http://notepad-plus-plus.org/">Notepad++</a> が使いやすくて重宝してます。</p>



<span id="more-1882"></span>



<h2 class="wp-block-heading">シンタックスファイルを追加する</h2>



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



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



<p><a href="http://leafo.net/lessphp/">lessphp &#8211; leaner css in php</a></p>



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



<p>適当なLessファイルをひらいて</p>


<pre class="wp-block-code"><span><code class="hljs">setf less
</code></span></pre>


<p>とかしてテストしてみましょう。</p>



<h2 class="wp-block-heading">.lessファイルを関連付けする</h2>



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


<pre class="wp-block-code"><span><code class="hljs language-css">" <span class="hljs-selector-tag">Less</span>
<span class="hljs-selector-tag">au</span> <span class="hljs-selector-tag">BufNewFile</span>,<span class="hljs-selector-tag">BufRead</span> *<span class="hljs-selector-class">.less</span>            <span class="hljs-selector-tag">setf</span> <span class="hljs-selector-tag">less</span>
</code></span></pre>


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



<h2 class="wp-block-heading">less.vimが見つからなかった時は</h2>



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



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


<pre class="wp-block-code"><span><code class="hljs">$ cd /Applications/MacVim.app/Contents/Resources/vim/runtime/syntax/
$ cat sass.vim &gt; less.vim
$ vim less.vim
</code></span></pre>


<p>sass.vim を複製した less.vim を開き、</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">syn match sassVariable <span class="hljs-string">"$&#91;&#91;:alnum:]_-]+"</span>
syn match sassVariableAssignment <span class="hljs-string">"%(&#91;!$]&#91;&#91;:alnum:]_-]+s*)@&amp;lt;=%(||)=="</span> nextgroup=sassCssAttribute skipwhite
syn match sassVariableAssignment <span class="hljs-string">"%(&#91;!$]&#91;&#91;:alnum:]_-]+s*)@&amp;lt;=:"</span> nextgroup=sassCssAttribute skipwhite
</code></span></pre>


<p>この部分の$を@に書き換える。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">syn match sassVariable <span class="hljs-string">"@&#91;&#91;:alnum:]_-]+"</span>
syn match sassVariableAssignment <span class="hljs-string">"%(&#91;!@]&#91;&#91;:alnum:]_-]+s*)@&amp;lt;=%(||)=="</span> nextgroup=sassCssAttribute skipwhite
syn match sassVariableAssignment <span class="hljs-string">"%(&#91;!@]&#91;&#91;:alnum:]_-]+s*)@&amp;lt;=:"</span> nextgroup=sassCssAttribute skipwhite
</code></span></pre>


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



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



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



<h2 class="wp-block-heading">Less.appは素敵ですよ</h2>



<p>いずれ改めて紹介しようとは思ってますが、<br />
MacOSで使える <a href="http://incident57.com/less/">LESS.app For Mac OS X</a> は素晴らしいです。<br />
フォルダごとに管理も出来るし、出力先のパスも指定できる。<br />
Lessniumもこれくらい気の利いたツールにしてみたい…</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
