Recommending: lesscss

作者:   發佈於: ,更新於:   #css

LESS CSS is a nice tool to simply your CSS work. It extends the syntax of CSS itself a little bit to make many tedious work easier. For instance, you can write nested rules:

.hd {
    color: #000;
    .title { font-size: 140%; }
}

And that compiles to:

.hd { color: #000; }
.hd .title { font-size: 140%; }

This is my favorites feature of LESS among others.

In Emacs, I add a hook to after-save-hook to make it auto-compiles LESS on saving files if the filename ends with .less:


(defun compile-less-css ()
  "Compile LESS to CSS"
  (interactive)
  (if (string-match "\.less$" (buffer-file-name))
      (async-shell-command (concat "lessc " (buffer-file-name)) nil nil)))

(add-hook 'after-save-hook 'compile-less-css)

Also, since the syntax of LESS is almost the same as CSS, I just use the css-mode for editing it. Coloring looks ok, and the indentation is correct:

(setq auto-mode-alist (cons '("\\.less$" . css-mode) auto-mode-alist))

I also decide to commit the compiled CSS files into git/svn repository, so it will be easier for other co-workers, and easier for deploying the app.