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 で調べて下さい。
lessc コマンドは標準出力に less ファイルを css に変換したもの出力するコマンドなので、> によるリダイレクトでファイルに出力できます。
$ lessc style.less > style.css
という感じで、CSSファイルを出力します。
引数に -x(--compress)もしくは --yui-compress を付けると圧縮して出力できます。
-x はブロック毎に1行づつ、--yui-compress はYUI CSS Compressorのように全て1行にして圧縮することができます。
圧縮サンプル。
@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
auto-install を使用する場合は以下のような感じで。
(install-elisp "https://raw.github.com/purcell/less-css-mode/master/less-css-mode.el")
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)