css - 如何使用 vim 对 css 选择器进行排序？

Question

我想在我的 scss 文件中按字母顺序排列 css 选择器（和属性）。我确信 vim 可以做到这一点（即使我需要使用一些外部工具）。您将如何对以下内容进行排序？

h2 { 
  color:red;
  background-color:green;
}
h1 {
  font-size:12px;
}

对此：

h1 {
  font-size:12px;      
}
h2 {
  background-color:green;
  color:red;
}

Answer 1

对于您的简单示例，以下两个片段似乎有效，但我担心它们可能会因更大、更复杂的 css 而失败。

---

要订购我使用宏**的属性：

:let @q = "/{^Mvi{:sort^M"|%norm! @q

^{** 注意这里的 ^M 是用 . 输入的Ctrl-vCtrl-m。}

解释：

1. 定义一个宏来：
   • 搜索“{”
   • 选择“{”和“}”之间的文本
   • 按行对选择进行排序
2. 在缓冲区中的所有行上运行宏。

---

要订购我使用替代和排序的选择器：

:%s/\v([^}])\n/\1/g|%sort|%s/\v[;{]/&\r/g

解释：

1. 对于以“}”以外的内容开头的每一行，删除换行符以将此块折叠为一行。
2. 按行对缓冲区进行排序。
3. 在每个“;”之后 或“{”插入换行符。

尾随空格会稍微消除这一点，但您没有任何这些，对吧？:)

Answer 2

试试CSScomb。该工具以可定制的方式对您的 css 进行排序。你可以在网上试试。

CSScomb 有Vim插件。

从 CSScomb 的网站：

• 对 CSS 属性进行排序（在专业人员的帮助下对属性进行排序）
• 设置 CSS 属性的顺序（使用你习惯的顺序）