Emacsユーザーのための LESS 導入

Emacsユーザーが快適に LESS を使えるようになるまでの導入記事です。

LESS とは何か。

LESSとは、CSSメタ言語と呼ばれるもので、LESS の他に Sass(SCSS) と呼ばれるものがあります(SassとSCSSはちょっとだけ文法の違う兄弟みたいなもの)。

LESS と Sass の違い

文法がわりと違います。詳しくははじめてのCSSメタ言語はLessがおすすめ！ « NAVER Engineers' Blogあたりを参照。

LESS の導入。

LESS は JS によるクライアントサイド（要するにブラウザ上）の変換（less->css）に対応しているので、てっとり早く試してみるのに向いています。
具体的には style.less ファイルと一緒に、lessサイトからダウンロードできる less.js を読み込むだけで使えます。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

サーバーサイドの変換。

サーバーで変換したい（要するにブラウザ以外でCSSファイルを出力したい）場合は、node.js（以下、Node）を導入する必要があります。

$ npm install -g less

Node を導入した上で、npm に -g を付けてコマンドラインツールをインストールすると lessc コマンドが /usr/local/bin/lessc にインストールされて、使えるようになります。
-g を知らない人は、$ man npm で調べて下さい。

これは、標準出力に less ファイルを css に変換したもの出力するコマンドなので、> によるリダイレクトでファイルに出力できます。

$ lessc style.less > style.css

という感じに、CSSファイルを出力します。
引数に -x（--compress）もしくは --yui-compress を付けると圧縮して出力できます。

-x はセレクタ毎に1行づつ、--yui-compress はYUI CSS Compressorのように全て1行にして圧縮することができます。

圧縮サンプル。

example.less

@the-border: 1px;
@base-color: #111;
@red:        #842210;

# header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
# footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

上記の example.less を圧縮すると、以下のようになる。

-x（--compress）の場合。

$ lessc -x example.less
# header{color:#333333;border-left:1px;border-right:2px;}
# footer{color:#114411;border-color:#7d2717;}

2行になる。

--yui-compress の場合。

$ lessc --yui-compress example.less
# header{color:#333;border-left:1px;border-right:2px}#footer{color:#141;border-color:#7d2717}

1行になる。

おまけ：引数なしの場合。

# header {
  color: #333333;
  border-left: 1px;
  border-right: 2px;
}
# footer {
  color: #114411;
  border-color: #7d2717;
}

Emacsの LESS CSSモードについて。

いまのところ、メジャーモードはひとつだけでLESS CSSモードというのがある（Emacs上のモード名は less-css-mode）。

less-css-mode は css-modeの派生モードとして定義されているため、css-mode を使っている人にとっては、違和感なく使うことができます。

導入後、拡張子 .less ファイルを開くと自動的に less-css-mode になります。

LESS CSSモードの導入。

GitHub から直接 less-css-mode.el ファイルをダウンロードしてインストールする方法と、package.el を使った Marmalade リポジトリからのインストール方法の2種類があります。

package.elが使える場合は、以下のように Marmaladeリポジトリを追加しておくと、

(add-to-list 'package-archives
 '("marmalade" . "http://marmalade-repo.org/packages/"))

以下のコマンドで LESS CSSモードが導入できる。

M-x package-install RET less-css-mode RET

LESS CSSモードの特徴。

• Flymake による文法チェック
• css への書き出し

標準で lessc コマンドを利用した Flymake による動的文法チェックと、cssファイルへの出力に対応しています。

なので、LESS CSSモードを使いたい場合は、npm による less 導入がほぼ必須です。

また、Emacsで /usr/local/bin のパスが exec-path に追加されている必要があります。まぁ、基本的には大丈夫でしょう。

どうしても Flymake が嫌だという人は、以下のように less-css-mode 実行時の hook に flymake-mode-off を挟んでオフにすることもできます。

(defun less-css-mode-hooks ()
  (flymake-mode-off))

(add-hook 'less-css-mode-hook 'less-css-mode-hooks)

CSSファイルを書き出す。

less-css-compile というコマンドが定義されており、less-css-mode-map に C-c C-c というキーバインドが登録されています。

なので、いつでも C-c C-c で、編集中の less ファイルを css ファイルに書き出すことができます。

保存時に自動的にCSSファイルを書き出す。

less-css-mode の after-save-hook に less-css-compile-maybe という関数が追加されています。

これは、less-css-compile-at-save 変数が nil 以外の場合、less-css-compile が実行されるというものです。

まぁ、要するに 以下のように設定しておくと、less-css-mode でファイルを保存したときに、自動的に CSSファイルを書き出してくれるようになります。

(setq less-css-compile-at-save t) ; 初期値は nil
;; lessc への引数 '("arg") 形式で
;; (setq less-css-lessc-options '("--yui-compress"))

また、バッファローカル変数として less-css-output-file-name というのがあるので、これに値を入れるとCSS出力時のファイル名を任意のものに変更することもできます。

おまけ：CSS書き出し時のwindow分割がうざい。

CSSへの書き出しは compile.el の機能を使っており、compilation というバッファが表示される仕様になっています。

これを制御するには色々と方法がありますが、EmacsWiki: Mode Compileに自動的に隠すコードがあるので、これを紹介しておきましょう。

(when (fboundp 'winner-mode)
  (winner-mode t))

(setq compilation-finish-functions 'compile-autoclose)
(defun compile-autoclose (buffer string)
  (cond ((string-match "finished" string)
         (bury-buffer "*compilation*")
         (winner-undo)
         (message "Build successful."))
        (t
         (message "Compilation exited abnormally: %s" string))))

window分割の undo/redo ができる winner-mode を使っています。

C-c left と C-c right で window 分割状態を undo/redo できます。

これについてはいつか書きましょう。

おまけ2：less-css-mode で auto-complete を使う。

auto-complete-config.el をインストールしている前提だと、以下の設定で可能です。

(add-to-list 'ac-modes 'less-css-mode)
(add-hook 'less-css-mode-hook 'ac-css-mode-setup)