/**
* 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;
}
}