Modifying Sass color variables

Roughly 1 minute, 49 seconds to read

Sass comes with functions that can easily be applied to colours in your CSS properties. These functions, can be very useful if used correctly. They let you manipulate your colours without cluttering your CSS with other HEX codes. When we use the functions with variables, they can speed up our development remarkably.

I’ll start with showing you what can be achieved using the lighten(), darken() and rgba(). For this example I have used 1 single colour:

$color: #b5b6c0;

Using that 1 single base colour we can then play around to create a load of variations of colours. Have a look at the below:

Another Roadside Attraction
by Tim Robbins

In other words, the settlement to all questions, the solutions to all issues are determined not by what will make the people most healthy and happy in the bodies and their minds but by economics. Dollars or rubles. Economy uber alles.

“Morels are ugly in the skillet. The caps look like the scrotums of leprechauns, the stems like the tusks of fetal elephants.”

D 50%D 40%D 25%ColourL 5%L 10%L 15%L 20%L 50%R 0.15R 0.25

The code used to achieve all these variations of 1 base colour can be found below:

.box {
	overflow: hidden;
	padding: 6% 5%;
	background: lighten( $color, 15%);
	color: darken( $color, 25%);
	border: 1px solid darken( $color, 50%);
	.box {
		background: lighten( $color, 50%);
		border: 1px solid $color;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: 1px 1px 0 0 lighten( $color, 50%);
		box-shadow: 1px 1px 0 0 lighten( $color, 50%);
		.box {
			border: 1px solid lighten( $color, 10%);
			-webkit-box-shadow: 2px 2px 1px 0 rgba( $color, 0.25);
			box-shadow: 2px 2px 1px 0 rgba( $color, 0.25);
			.box {
				border: 1px solid lighten( $color, 15%);
				-webkit-box-shadow: 2px 2px 1px 0 rgba( $color, 0.15);
				box-shadow: 2px 2px 1px 0 rgba( $color, 0.15);
	h2 {
		text-align: center;
		color: darken( $color, 40%);
		text-shadow: 1px 1px 0 lighten( $color, 50%), 2px 2px 0 lighten( $color, 10%), 3px 3px 0 lighten( $color, 50%), 4px 4px 0 lighten( $color, 20%), 5px 5px 0 lighten( $color, 50%);}
	em {
		color: lighten( $color, 5%);}

By now you should be able to see the potential of using these functions. If I were to change the 1 base colour I could (in this example) change around 15 colours in my design.

The most exciting thing about this is that we still have Saturate() & Desaturate(), Adjust-hue() and Tint() & Shade() to look into. When I get a chance I will update this post.

posted February 27th 2014

Leave a Reply

Your email address will not be published. Required fields are marked *