Skip to main content
Version: next

Debug

This file contains some classes for helping debug and check the structure.

All the classes present in the file are added to the body tag by default.

/* Display a baseline grid on the page */
.debug:baseline

/* Outline all Object classes */
.debug:o

/* Outline all Component classes */
.debug:c

/* Outline all Pattern classes */
.debug:p

/* Outline all Theme classes */
.debug:t

/* Outline all Utility classes */
.debug:u

/* Outline all Hack classes */
.debug:_

/* Outline all Responsive classes */
.debug:a

/* Outline all previous classes listed */

.debug:all

Demo:

To enable these classes, you must set at true the $u-debug

variable when you import the file.
It's a security to avoid the adding unnecessary CSS. Also, it must be used only on a local or development environment for testing and debuging. :::

@forward "@glsass/utilities/utilities.debug" with (
  $u-debug: true,
);