很痛快的寫完CSS以后, 最郁悶的是還要排序CSS屬性, 而且大家推崇的 CSS排序規(guī)范 還賊長(zhǎng), 人工調(diào)整CSS屬性是非常痛苦的.
今天把原來(lái)的css代碼重新整理了一下, 寫了一個(gè)新的插件 css-sort.el , 顧名思義, 就是自動(dòng)給CSS/SCSS文件中的屬性排序.
主要完成幾個(gè)功能:
- 不需要選中排序區(qū)域, 直接在CSS/SCSS文件中, 執(zhí)行一個(gè)命令就會(huì)自動(dòng)排序
- 完全按照 CSS排序規(guī)范 嚴(yán)格排序的, 不用人工一個(gè)一個(gè)對(duì)比順序
- 自動(dòng)跳過(guò)以 @ 開(kāi)頭的函數(shù)定義區(qū)域, 比如 @function , @mixin 等
- 智能識(shí)別 @include 屬性, 并把 @include 屬性排列在屬性區(qū)域的頂部
關(guān)鍵技術(shù)
特別是一些非常復(fù)雜的 SCSS 文件, 如果不能智能的識(shí)別出 @include 多行代碼塊的語(yǔ)法區(qū)域, 排序功能就無(wú)法使用.
今天想了一個(gè)巧妙的方法, 先把光標(biāo)移動(dòng)到 @include 行的開(kāi)頭, 然后執(zhí)行 forward-sexp 函數(shù)1萬(wàn)次, 當(dāng)Emacs遇到 @include 語(yǔ)句結(jié)尾的時(shí)候, 會(huì)自動(dòng)停下來(lái), 這樣就能智能的識(shí)別 @include 語(yǔ)句結(jié)尾的位置了, 不管你 @include 語(yǔ)句后面函數(shù)是否有參數(shù), 甚至是你寫不寫分號(hào)結(jié)尾都能智能識(shí)別, 哈哈哈哈.
(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! ;)
