很痛快的写完CSS以后, 最郁闷的是还要排序CSS属性, 而且大家推崇的 CSS排序规范 还贼长, 人工调整CSS属性是非常痛苦的.
今天把原来的css代码重新整理了一下, 写了一个新的插件 css-sort.el , 顾名思义, 就是自动给CSS/SCSS文件中的属性排序.
主要完成几个功能:
- 不需要选中排序区域, 直接在CSS/SCSS文件中, 执行一个命令就会自动排序
- 完全按照 CSS排序规范 严格排序的, 不用人工一个一个对比顺序
- 自动跳过以 @ 开头的函数定义区域, 比如 @function , @mixin 等
- 智能识别 @include 属性, 并把 @include 属性排列在属性区域的顶部
关键技术
特别是一些非常复杂的 SCSS 文件, 如果不能智能的识别出 @include 多行代码块的语法区域, 排序功能就无法使用.
今天想了一个巧妙的方法, 先把光标移动到 @include 行的开头, 然后执行 forward-sexp 函数1万次, 当Emacs遇到 @include 语句结尾的时候, 会自动停下来, 这样就能智能的识别 @include 语句结尾的位置了, 不管你 @include 语句后面函数是否有参数, 甚至是你写不写分号结尾都能智能识别, 哈哈哈哈.
(defun css-sort-end-of-include-sexp ()
(save-excursion
(ignore-errors
(forward-sexp 10000))
(point)))
安装方法
- 下载 css-sort 里面的 css-sort.el 放到 ~/elisp 目录
- 把下面的配置加入到 ~/.emacs 中
(add-to-list 'load-path (expand-file-name "~/elisp"))
(require 'css-sort)
使用
M-x css-sort
That’s all! 