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


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

## LESS とは何か。

[LESS](http://lesscss.org/)とは、CSSメタ言語と呼ばれるもので、LESS の他に [Sass(SCSS)](http://sass-lang.com/) と呼ばれるものがあります(SassとSCSSはちょっとだけ文法の違う兄弟みたいなもの)。

### LESS と Sass の違い

文法がわりと違います。詳しくは[はじめてのCSSメタ言語はLessがおすすめ！ « NAVER Engineers' Blog](http://tech.naver.jp/blog/?p=951)あたりを参照。

## LESS の導入。

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

```html
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
```
	
### サーバーサイドの変換。

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

```sh
$ npm install -g less
```

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

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

```sh
$ lessc style.less > style.css
```

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

-x はセレクタ毎に1行づつ、--yui-compress は[YUI CSS Compressor](http://developer.yahoo.com/yui/compressor/css.html)のように全て1行にして圧縮することができます。

### 圧縮サンプル。

```css: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）の場合。

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

2行になる。

####  --yui-compress の場合。

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

1行になる。

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

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

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

いまのところ、メジャーモードはひとつだけで[LESS CSSモード](https://github.com/purcell/less-css-mode/)というのがある（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リポジトリを追加しておくと、

```elisp
(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 を挟んでオフにすることもできます。

```elisp
(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ファイルを書き出してくれるようになります。

```elisp
(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](http://emacswiki.org/emacs/ModeCompile)に自動的に隠すコードがあるので、これを紹介しておきましょう。

```elisp
(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 をインストールしている前提だと、以下の設定で可能です。

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