css - 使用CSScomb插入注释(使用Sublime Text)

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

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

因此，该想法将是更改配置文件，其中指出:

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

但得到的输出内容如下:

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

有任何想法吗？

最佳答案

DIY小组评论

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

打开Sublime Text，从菜单中选择Preferences > Browse Packages…；这将打开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。 (此最新版本添加了新的逻辑，以防止在多次运行CSScomb时重复复制组注释。)

如果您对这些更改感到满意，请完整复制并粘贴它们以替换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"
    ],
    [
        …
    ]
]

运行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;
}