Get it All
Together

For years, front-end layout developers have struggled with how best to manage Cascading Style Sheets in a way that is organized. In particular, I have always found maintaining a color scheme of a few basic colors a pain with conventional CSS. That’s because we so often refer to one color across multiple style declarations. Dozens, really, and if you want to make an adjustment to your color scheme, that requires tedious search and replace that invariably ends up confusing you.

Cascading Style Sheets cascade, but they’re static.

My solution has been in the past to create separate stylesheets focused on color – and along with that, another for typesets. This helped keep my color declarations centrally located, but added the complexity of having to declare a given class or ID’s style multiple times: once for my main structural CSS and again for my color CSS. Better, but not great. And adding stylesheets is going the wrong direction in terms of efficient load times.

With SASS, my first blast of enthusiasm was for variables. Now instead of having to maintain a separate color stylesheet, I could simply declare colors as variables and then use them where necessary. Instead of search and replace, minor color edits could happen by redefining a single variable. Sweet!

[css]// Category Styles:
$blue : rgba(77, 68, 102, 1);
$red : rgba(153, 15, 38, 1);
$grey : rgba(115, 153, 145, 1);
$white : rgba(255, 255, 255, 1);[/css]

This is great! But I ran into a situation with styles that left me wanting more.

Because I like to give my audience visual queues that reinforce my category-based blog sections, I want to be able to associate those top-level categories with specific colors. Then I’d like to be able to color either the text, background or border of a given element with a complimentary color.

Now, I could type all those styles out. But this is SASS: the dynamic CSS generator. Surely, there must be some easier way?

Yes, there is. Seeking out a solution for my newest bout of inspirational laziness (pronounced “programming”), I sought out the help of folks at Stack Exchange. And that way is to use a mixin and what in PHP would be called a “multi-dimensional array.” Observe:

[css]$categories:
technology rgba(20, 78, 102, 1),
science rgba(153, 15, 38, 1),
rochester rgba(166, 159, 33, 1),
politics rgba(10, 82, 60, 1),
journalism rgba(224, 176, 11, 1);
@mixin category-backgrounds() {
@each $category in $categories {
.bg-#{nth($category, 1)} {
background-color: nth($category, 2);
}
.fg-#{nth($category, 1)} {
color: nth($category, 2);
}

.bd-#{nth($category, 1)} {
border-color: nth($category, 2);
}
}
}[/css]

The result is a list of CSS elements like so:
[css]/* line 108, ../scss/app.scss */
.bg-politics {
background-color: #0a523c;
}

/* line 111, ../scss/app.scss */
.fg-politics {
color: #0a523c;
}

/* line 115, ../scss/app.scss */
.bd-politics {
border-color: #0a523c;
}

/* line 108, ../scss/app.scss */
.bg-journalism {
background-color: #e0b00b;
}

/* line 111, ../scss/app.scss */
.fg-journalism {
color: #e0b00b;
}

/* line 115, ../scss/app.scss */
.bd-journalism {
border-color: #e0b00b;
}[/css]

And so on. Easy, convenient color management for CSS! Oh, I think SASS and I are going to get along just fine, thank you.