2012年08月14日

Textmate 2でLESS @ Mac

HTMLはZen Codingで書きやすくなったので、今度はスタイルシートを記述する環境を改善する為に、Textmate 2のLESS対応を行いました。まずはバンドルファイル。GitHubから持ってきて解凍するとフォルダーになってしまい、インストールをどうするのか、Textmate初心者としては悩みました。結局フォルダー名をless.tmbundleにして、Zen Codingの時と同様の場所にインストールすれば動きました。

appden/less.tmbundle · GitHub
>>関連リンク

インストール先
/Users/(ユーザー名)/Library/Application Support/TextMate/Managed/Bundles

バンドルファイルだけではLESSのコンパイルはしてくれないので、次はコマンドラインツールのlesscですが、lesscのコマンドに関してはnodeをインストールして、npmでインストールすればOK。ただし、-gをつける必要があるのかな。あれこれ試したので本当に必要かどうかはよく分かってなかったりする。

npm install -g less

これで完了かと思ったら、バンドルファイルに同梱されている、LESSからCSS変換コマンドが上手く動かない。パスが通ってない感じだったので、フルパス記述して見たがダメ。記述方法を変えたりしてもダメで、何故だって感じで結構悩みました。結局、Textmateの設定にある、VariablesでPATHを追加して、ターミナルで、echo $PATHした結果を書けば良かったみたいです。勝手に参照してくれれば良いのに・・・。

パスを通して、やっとコマンドが動く状態になったのですが、バンドルファイルに付いているコマンドだとちょっと不便。って事で、書き換えようかと思ったら良い物を発見。内容を下記のスクリプトに書き換えました。これで自動的に、LESSファイルと同じ名前のCSSファイルを作ってくれます。

barbuza's gist: 1723950 ― Gist
>>関連リンク

閲覧数: 1854 / はてなブックマークusers

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト