使用CSScomb插入评论(使用Sublime文本)

Question

我的客户要求在代码中有很多注释，包括css文件。

所以我考虑使用CSScomb来重新组织css代码并自动添加注释。这没有道理，但为什么不呢。

因此，我们的想法是更改配置文件，其中包含：

[
    "font",
    "font-family"
],
[
    "padding",
    "margin"
]
...

但得到的输出写：

/* FONT STYLE */
font: ....;
font-family: ....;

有什么想法吗？

Answer 1

DIY小组评论

您可以通过编辑CSScomb包中的sort-order.js文件来自行添加此功能。

1. Sublime Text打开后，从菜单中选择Preferences > Browse Packages…；这将打开Packages文件夹
2. 从Packages文件夹中，导航到CSScomb/node_modules/csscomb/lib/options/sort-order.js
创建此文件的副本以供检索，以备您恢复更改时使用。我给我的副本起了个名字sort-order-original.js
在其他目录中创建此文件的副本以供检索，以备您恢复更改时使用。我将副本向上移动了一个级别，进入了一个新目录../originals/options/sort-order.js
注意：如果您简单地重命名现有目录中的副本，它可能会被模块包含并运行；所以，把它搬到一个新的地方是最安全的
4. 在Sublime Text中打开sort-order.js进行编辑
有关要进行的必要更改，请参阅此差异
请参阅this差异，以获取所需的更改（此最新版本添加了新的逻辑，以防止在多次运行CSScomb时重复组注释。）
6. 如果您对这些更改感到满意，请复制&将它们整体粘贴以替换CCD_ 7的内容。您可以选择进一步编辑以满足您的需要。保存
   注意：从本质上讲，这些更改是用一个额外的属性扩展每个排序的对象，该属性包含您在用户设置中可选提供的CSS注释。我将在下一步中向您展示添加注释的位置
7. 现在，您可以按组添加评论了。从Sublime Text菜单中，选择Preferences > Package Settings > CSScomb > Settings – User。如果您还没有配置自己的设置，可以先将Settings – Default的内容复制到Settings – User中
8. 在用户设置文件中，找到"sort-order"属性。它要么是属性名称的数组，要么是属性名的数组。默认情况下，CSScomb会在嵌套的数组组之间添加一条空行，但我们已经修改了执行此操作的文件
9. 现在，您可以选择添加注释作为任何嵌套数组的第一个属性。sort-order.js文件将检测到这一点，并将其输出到组的顶部。如果未定义注释，则输出默认的空行

示例用户设置：

"sort-order": [
    [
        "/* LAYOUT */",
        "position",
        "z-index",
        "top",
        "right",
        "bottom",
        "left"
    ],
    [
        "/* DISPLAY */",
        "display",
        …
        "flex-align"
    ],
    [
        "/* TYPOGRAPHY */",
        "font",
        …
        "line-height"
    ],
    [
        …
    ]
]

运行CSScomb之前：

.selector {
    font-family: Arial;
    line-height: 1;
    position: relative;
    display: block;
    background-color: red;
}

运行CSScomb后：

.selector {
    /* LAYOUT */
    position: relative;
    /* DISPLAY */
    display: block;
    /* TYPOGRAPHY */
    font-family: Arial;
    line-height: 1;
    background-color: red;
}