Generate Colors for Gutenberg with SCSS

gutenberg_colors.scss

/**
 * Custom SCSS Variables and Class Generators
 *
 * This SCSS file defines custom variables for colors and generates classes
 * for applying these colors to text, backgrounds, and borders. Additionally,
 * it generates classes for font sizes based on predefined sizes in 'rem' units.
 *
 * Gist Keywords: scss, sass, variables, colors, font sizes, gutenberg, editor, styles
 *
 * @author Knol Aust
 */

/* Define custom colors */
$colors: (
    sample-red: #FF0000,
    sample-blue: #0000FF,
    sample-green: #008000
);

/* Generate Colors classes */
@each $name, $color in $colors {
    /* Create a class for text color with the specified color */
    .has-#{$name}-color {
        color: $color;
    }

    /* Create a class for background color with the specified color */
    .has-#{$name}-background-color {
        background-color: $color;
    }

    /* Create a class for border color with the specified color */
    .has-#{$name}-border-color {
        border-color: $color;
    }
}

/* Define custom font sizes in 'rem' units */
$font-sizes: (
    small: 0.875rem, /* Equivalent to 14px */
    medium: 1.125rem, /* Equivalent to 18px */
    large: 1.5rem /* Equivalent to 24px */
);

/* Generate Fonts classes */
@each $size-name, $size in $font-sizes {
    /* Create a class for font size with the specified size */
    .has-#{$size-name}-font-size {
        font-size: $size;
    }
}