如何折叠或折叠VS代码中的多个CSS规则？

Question

我有几条与CSS相关的CSS规则(即30条有关CSS加载旋转器的规则)

我希望能够把所有这些规则合并在一起，这样我就可以折叠这个部分，如果我需要的话，可以打开这个部分。

我知道我可以折叠每个单独的规则，但我不知道如何才能对一堆列出在一起的规则这样做。我想我可以在一对花括号中添加规则。

它起了作用，因为它让我崩溃了，那一组花括号，但规则不再起作用。

我所能做的任何想法都可以使我能够折叠大量的规则并将它们分组，而不需要简单地将它们保存在单独的文件中。

提前感谢您的帮助！

Answer 1

/* #region */
.css{}
/* #endregion */

或

/* #region optional name for the section */
.css{}
/* #endregion */

这适用于VS代码，还没有检查其他编辑器。

编辑:用于为vs代码创建区域的代码段：

"css-region": {
    "body": [
        "/* #region ${1: name} */",
        "$0",
        "/* #endregion ${1: name} */",
    ],
    "description": "Create a css region section",
    "prefix": "#reg"
}

Answer 2

我已经开始滥用@media查询，将它们封装到块中，并在注释中标记这些部分。您甚至可以嵌套块以获得更多的组织。

/* tables */
@media {
    table {
        /* stuff */
    }
    td {
        /* stuff */
    }

    /* table images */
    @media {
        td img {
            /* stuff */
        }
    }
}

大多数IDE将允许您折叠{}块，而缩进也会在视觉上有很大帮助