← #144 Quickly type color variables
#145

Fold CSS declarations with region markers

Topics: CSS, Visual Studio Code

In Visual Studio Code, we can make given CSS declarations foldable with the region markers.

Just wrap the declarations between /*#region*/ and /*#endregion*/ if you're using CSS, SCSS or Less.

SCSS and Less also accept // as a valid CSS comment, hence you can use // #region and // #endregion in the SCSS/Less files.

/* === Header === */
/* #region */
...
/* #endregion */

/* === Footer === */
/* #region */
...
/* #endregion */

/* === Responsive === */
/* #region */
...
/* #endregion */

The following screenshot shows how Visual Studio Code helps us organize the CSS of this site:

Fold CSS declarations with region markers

Fix a typo or suggest an improvement
#146 Avoid skipping heading levels