使用 CSScomb 插入注释（使用 Sublime Text）

Question

我的客户要求在代码中添加很多注释 - 包括 css 个文件。

所以我想到了用CSScomb来重新组织css代码并自动添加注释。这没有意义，但为什么不呢。

所以我的想法是更改配置文件，其中指出：

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

但得到的输出是：

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

有什么想法吗？

Answer 1

DIY 组评论

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

打开 Sublime Text，从菜单中选择 Preferences > Browse Packages…；这将打开包文件夹。
从 Packages 文件夹，导航到 CSScomb/node_modules/csscomb/lib/options/sort-order.js。
~~创建此文件的副本以便在您想要恢复更改时进行检索。我将我的副本命名为 sort-order-original.js.~~
在不同的目录中创建此文件的副本以供检索，以备您要恢复更改时使用。我将我的副本向上移动了一个级别到一个新目录 ../originals/options/sort-order.js.
注意：如果您只是在现有目录中重命名副本，它可能会被包含并运行模块；所以，把它搬到一个新的地方是最安全的。
在 Sublime Text 中打开 sort-order.js 进行编辑。
~~Consult this diff for the necessary changes to be made.~~
Consult this diff for the necessary changes to be made。 (最新版本新增逻辑，防止运行宁CSS多次梳理群评论重复。)
如果您对这些更改感到满意，请完整复制并粘贴它们以替换 sort-order.js 的内容。您可以选择进一步编辑以满足您的需要。保存。
注意：本质上，这些更改扩展了每个已排序对象的附加属性，其中包含您在用户设置中可选提供的 CSS 注释。下一步我会告诉你在哪里添加评论。
现在，您可以按组添加评论了。从 Sublime Text 菜单中，选择 Preferences > Package Settings > CSScomb > Settings – User。如果您尚未配置自己的设置，则可以通过将 Settings – Default 的内容复制到 Settings – User.
在用户设置文件中，找到"sort-order" 属性。它可以是属性个名称的数组，也可以是属性个名称的数组。默认情况下，CSScomb 会在嵌套数组组之间添加一个空行，但我们修改了执行此操作的文件。
您现在可以选择将注释添加为任何嵌套数组的第一个属性。 sort-order.js 文件将检测到这一点并将其输出到组的顶部。如果没有定义注释，则输出默认的空行。

示例用户设置：

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

前运行宁CSS梳理：

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

运行宁CSS梳理后：

.selector {

    /* LAYOUT */
    position: relative;

    /* DISPLAY */
    display: block;

    /* TYPOGRAPHY */
    font-family: Arial;
    line-height: 1;

    background-color: red;
}

使用 CSScomb 插入注释（使用 Sublime Text）

Insert comments with CSScomb (using Sublime Text)

css

sublimetext

prettify

DIY 组评论