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.