Naming colors in Sass

Using colors in your CSS is often a real challenge. In this article I’m going to explain how you can make this a lot more fun.

The problem

Let’s say you have the following CSS:

h1 {
	color: #4682B4;
}

a {
	color: #4682B4;
}

.blue-bar {
	background-color: #4682B4;
}

You see that the same color is used multiple times. If you decide to change the color, you have to change it in three different places. In large projects, this will be a lot more and it will be a real nightmare.

The solution

When you’re using Sass, you can use variables for this. You create a variable for each color, and you use the variable wherever you want to use that particular color.

$blue: #4682B4;

h1 {
	color: $blue;
}

a {
	color: $blue;
}

.blue-bar {
	background-color: $blue;
}

In this case you have only one color. But what are you going to do when you decide to add new shades of that same color? You have to give them all unique names, so you might end up with something like this:

$blue1: #4682B4;
$blue2: #4682B4;
$blue3: #4682B4;
$blue4: #4682B4;

This might work if you have only two or three shades of the same color, but how are you going to keep track of which variable is which shade of blue when you have a whole bunch of them? You have to give them a better name.

$blue: #4682B4;
$lighter-blue: #4682B4;
$darker-blue: #4682B4;
$really-dark-blue: #4682B4;

This looks a lot better, but is $lighter-blue the color that you used for the background, or was that $blue? These names don’t give much information. They don’t tell you anything about where the color is used. And what happens when you add another shade of blue that is lighter than $lighter-blue? Are you going to add an $even-lighter-blue? You don’t want to do that. A much better approach is to take a look at a tool that gives colors a more colorful name, e.g. Name That Color. Just type in your hexcode, and it gives you a nice name that you can use in your code. You then end up with something like this:

$cornflower-blue: #6195ED;
$steel-blue: #4682B4;
$spring-green: #12FE57;

It gives you a better idea of what kind of color it is, although the real problem still isn’t solved. This list of colors still doesn’t tell you where these colors are used. If you change one of the colors, it won’t give you any clue about which elements on the website will be touched. The solution is quite easy. Just add another list of variables that gives you this information.

$cornflower-blue: #6195ED;
$steel-blue: #4682B4;
$spring-green: #12FE57;

$header-text-color: $cornflower-blue;
$header-background-color: $spring-green;
$default-text-color: $steel-blue;

If you want to change the background color of your header, just assign a different color variable to the $header-background-color. That’s it. I hope this makes colors in CSS more fun!

Welcome!

I’m Reinier van der Windt, a developer from the Netherlands.

I started developing when I was about 12 years old. Back then I mostly wrote text-based games in QBasic. A couple of years later a classmate got me into web development and I started fiddling around with websites.

At college I studied Information Technology for a year and learned some C++ and Java. A year later I made the switch to Communication and Multimedia Design, where I was introduced to PHP, .NET and learned a lot about front-end development, photography, audio/video editing and typography.

When I finished school, I started working for a company that worked on their own content management system written in Perl, so I had to learn Perl. Because I had experience with PHP (and I was the only one there), I also got the task to maintain their support system that was based on an open source project.

A couple of years later I left that company and started working for their sister company. I did some projects in PHP with Zend Framework, became a Zend Certified Engineer, did a couple of projects in Python with Django Framework and some front-end projects, until I was placed on a Proof of Concept (PoC) for a large telecom provider. This PoC had to be build with Angular and was basically a front-end application that was talking to a REST API. Here is were my love for Angular and JavaScript started.

I never really liked JavaScript, because I didn’t like the fact that it runs in the browser. While working with Angular, my JavaScript skills improved rapidly and I really started to like it. Making my code run properly in all major browser suddenly became really easy. Now I use Angular whenever and wherever I can.

But, because I was doing front-end all the time, I really missed back-end development. So I started working on the API that I already used in the Angular application. The API was written in Python with Django Framework. At this moment I have been working on that API for a year now and I have learned many things. The API is quite huge and there are about 20 developers (give or take) working on it every day. In a team this size, communication and maintainability are two really important things. We are constantly refactoring parts of the API to make it more maintainable and more fun to work with.

In February 2016 I attended NG-NL 2016, a Dutch Angular conference with great speakers from the Angular Core team and the Angular community. The ending keynote was done by Todd Motto. Todd gave a really inspirational speech about Jerry the Pirate, who sailed into the world of Angular and went through all the phases of development. He talked about comfort zones and questions developers ask themselves, like “Am I good enough to help others?” Todd ended the keynote and the conference with a statement to think about: “You don’t know code, until you can write about it.” This keynote encouraged me to start writing about code. That’s why I created this website.

On this website I will post articles about development. I will write about new tools that I discover and how to use them, and problems I encounter during my daily work. It will all be open source, so if you want to help to improve the articles, just create a fork :)