Last Updated: May 02, 2019

Defining application color helpers with Sass

I'm a huge fan of single-line "utility" classes in CSS. They make writing your HTML faster and also mean that components are less likely to affect other parts of the system.

Here's how I recently re-organized Assembly's color helpers to take advantage of this style.

$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 }
}

I'm not generally a fan of some of SCSS' features, but looping over color maps like this definitely reduces surface area for possible mistakes.

#css

#scss