Sass Functions to Kick-Start Your Style Sheets

This is the updated version of an article originally published on November 11, 2014.

Sass has a number of built-in functions to help you set up the styles for your project a lot quicker and easier.

Let’s dive into a few of them!

The Darken and Lighten Sass Functions

Possibly two of the best-known functions in this list, I’m going to count these as one because they do the same thing, but in different directions.

As the names suggest, darken and lighten will darken and lighten a color by a certain percentage respectively. You could use them on a button’s hover state or throughout a site to create hierarchy. Here’s how:

$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);

The second argument in these two functions takes a percentage value by which to darken/lighten a color. This way you don’t have to look up the hex for a slightly lighter color every time you want an easy interaction state. For example, you could do this:

.brand-button {
  background: $main-color;
}

.brand-button:hover {
  background: $lighter-color;
}

.brand-button:visited {
  background: $darker-color;
}

Which compiles into this:

.brand-button {
  background: #6dcff6;
}

.brand-button:hover {
  background: #cdeffc;
}

.brand-button:visited {
  background: #0fafee;
}

Using these functions means that you could create an effective color palette that can remain consistent throughout your project. If, for instance, you have highlight and inactive state colors based off of a main brand color and your client decides to change their main color midway through development (it happens more than I care to admit…), you only have to change one value and see it cascade throughout the rest of a site.

The Opacify and Transparentize Sass Functions

Still sticking with colors, opacify and transparentize make colors more or less opaque respectively.

Personally, I’ve found these helpful when working with modals and other pop-ups where you might want the background content to fade out.

$main-color: rgba(0, 0, 0, 0.5);
$opaque-color: opacify($main-color, 0.5);
$transparent-color: transparentize($main-color, 0.3);

Unlike darken and lighten, the second argument in these two functions needs to be a decimal between 0 and 1 instead of a percentage. These functions are helpful for colors based off of a single, main brand color that permeates throughout a project. And again, by including these functions, you’re able to make a change to the main color alone and it will propagate accordingly.

You could use the values obtained with opacify and transparentize as follows:

.modal.focus {
  background: $main-color;
}

.modal.blur {
  background: $transparent-color;
}

.main-content {
  background: $opaque-color;
}

Which will compile into this:

.modal.focus {
  background: rgba(0, 0, 0, 0.5);
}

.modal.blur {
  background: rgba(0, 0, 0, 0.2);
}

.main-content {
  background: black;
}

You can also use fade-in and fade-out to create the same effect as these, as they’re aliases for opacify and transparentize.

The Complement Sass Function

As the name suggests, complement will return the complement of any color that gets fed into it. This is especially useful if you’re trying to create a call-to-action on your page or view and need a bit of visual contrast. Using this built-in function alleviates the need to go and look the color up on a color wheel.

$main-color: #6dcff6;
$call-to-action: complement($main-color); //=> this will return #f6946d

The Percentage Sass Function

Sass’s numeric functions help you create your own functions and loops. The percentage function, for instance, converts any number into a percentage, like so:

width: percentage(0.16) //=> this will return 16%

width: percentage(100px/50px); //=> this will return 200%

.foo {  
  width: if( 1 > 2, 400px, 500px); //=> this will return 500px
}