emacs下的less-mode

在淘宝的时候就调研过less,一个强大的 CSS 预处理器,但是一直没有整合到项目里。

实践才能出真知,宇宙最新、最强的东西一定要一股脑塞进mss项目里去。

less项目相关

github上的less.js项目,相关使用教程:http://lesscss.org/ (需要翻墙)

emacs下的less文件编辑

emacs下的css-mode无法满足less的嵌套对齐问题,纠结,不过强大的github应该有less-mode的实现,否则我也乘机学习下lisp整一个出来?哈,没那么简单。

运气不错,github上的emacs下less-mode插件

下载 less-mode.el 添加进emacs的配置路径,在 .emacs 添加以下配置

(require 'less-mode) 
(add-to-list 'auto-mode-alist '("\\.less$" . less-mode))

If you use smart-compile:

(add-to-list 'smart-compile-alist '(less-mode . (less-compile)))

If you use Flymake, it will work automatically.

该扩展支持:保存文件时候的自动编译

之前一直臆测,coffeescript,lesscss 服务端编译的话,每次调式都得手动执行编译命令,岂不是非常的烦?

强大的emacs,保存时自动编译可以成为解决方案之一,完全不会有开发时候的不爽呀。

例如:less/xx.less -> css/xx.css, 项目引用 css 路径下的文件,真实编辑的文件是 less 路径下对应的文件。

less-mode.el 继承的也是css-mode, 依旧有缩进的问题,elisp又不熟悉,只能简单的调整了下,不要css-mode的关键词高亮了,能对齐就好了。

改动的地方很少,

(define-derived-mode less-mode css-mode "Less" 
改为 
(define-derived-mode less-mode c-mode "Less"

并添加了2个缩进设置

(c-set-offset 'label' +)
(c-set-offset 'defun-close' /)

根据个人习惯改变了编译命令,会自动的把less文件编译并压缩到css路径

/home/yoo/music/public/less/css.less -> /home/yoo/music/public/css/css.less.css

完整的内容如下:

(require 'derived)
(require 'compile)

(defconst less-font-lock-keywords
  '(("@[^\s:;]+" . font-lock-constant-face)
    ("//.*$" . font-lock-comment-face)))

(defgroup less nil
  "Less mode"
  :prefix "less-"
  :group 'css)

(defcustom less-lessc-command "lessc --no-color"
  "Less compiler command"
  :group 'less)

(defcustom less-lessc-command-c "lessc --no-color -x"
  "Less compiler command"
  :group 'less)

(defcustom less-compile-at-save t
  "If not nil, Less buffers will be compiled on each save"
  :type 'boolean
  :group 'less)

(defcustom less-mode-hook nil
  "Hook run when entering Less mode"
  :type 'hook
  :group 'less)

(defun less-compile ()
  "Compiles the current buffer"
  (interactive)
  ;;(compile (concat less-lessc-command " " buffer-file-name))                                                                                                            
  (compile (concat less-lessc-command-c " " buffer-file-name " > " (replace-regexp-in-string "/less/" "/css/" buffer-file-name) ".css")))

(defun less-compile-maybe ()
  "Runs `less-compile' on if `less-compile-at-save' is not nil"
  (if less-compile-at-save
      (less-compile)))

(defun flymake-less-init ()
  (let* ((temp-file (flymake-init-create-temp-buffer-copy
                     'flymake-create-temp-inplace))
         (local-file (file-relative-name
                      temp-file
                      (file-name-directory buffer-file-name))))
    (list "lessc" (list "--no-color" local-file))))

(when (featurep 'flymake)
  (add-to-list 'flymake-allowed-file-name-masks
               '("\\.less$" flymake-less-init))
  (add-to-list 'flymake-err-line-patterns
               '("! \\(.*\\): on line \\([0-9]+\\): \\(.*\\)"
                 nil 2 nil 3))
  (add-to-list 'flymake-err-line-patterns
               '("! \\(.*\\): \\(.*\\)"
                 nil nil nil 2)))

(define-derived-mode less-mode c-mode "Less"
  "Major mode for editing Less files, http://lesscss.org"
  (run-hooks 'css-mode-hook)
  (c-set-offset 'label' +)
  (c-set-offset 'defun-close' /)
  (when (featurep 'flymake) (flymake-mode t))
  (font-lock-add-keywords nil less-font-lock-keywords)
  (add-hook 'after-save-hook 'less-compile-maybe nil t))

(provide 'less-mode)
;;; less-mode.el ends here