Definindo ajudantes de cores do aplicativo com Sass

Sou um grande f√£ de classes “utilit√°rias” de linha √ļnica em CSS. Eles tornam a escrita do seu HTML mais r√°pida e tamb√©m significam que os componentes t√™m menos probabilidade de afetar outras partes do sistema.

Veja como eu recentemente reorganizei os auxiliares de cores do Assembly para tirar vantagem desse estilo.

$white:  #FFF;
$black
: #353941;

$gray
-lighter: #F4F4F5;
$gray
-light: #ECEDEF;
$gray
: #C2C7D0;
$gray
-dark: #8B909A;
$gray
-darker: #666D78;

$green
: #33D6A6;
$blue
: #338EDA;
$red
: #EC3750;
$yellow
: #F2D930;

$colors
: (
white
: $white,
black
: $black,

gray
-lighter: $gray-lighter,
gray
-light: $gray-light,
gray
: $gray,
gray
-dark: $gray-dark,
gray
-darker: $gray-darker,

green
: $green,
blue
: $blue,
red
: $red,
yellow
: $yellow
);

@each $name, $value in $colors {
.#{$name} { color: $value }
.bg-#{$name} { background-color: $value }
.border-#{$name} { border-color: $value }
.fill-#{$name} { fill: $value }
.stroke-#{$name} { stroke: $value }

.#{$name}-hover:hover { color: $value }
.bg-#{$name}-hover:hover { background-color: $value }
.border-#{$name}-hover:hover { border-color: $value }
.fill-#{$name}-hover:hover { fill: $value }
.stroke-#{$name}-hover:hover { stroke: $value }
}

Geralmente não sou um fã de alguns dos recursos do SCSS, mas fazer loop em mapas de cores como esse definitivamente reduz a área de superfície para possíveis erros.