HTML & CSS
Article
By Byron Houwens

Sass Functions to Kick-Start Your Style Sheets

By Byron Houwens

Sass Functions

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!

--ADVERTISEMENT--

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

Watch AtoZ: Sass

Learn Sass letter by letter

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%

The percentage function doesn’t even care if you shove units like px onto the values. This makes it a candidate for easy typographic or responsive value conversion, where percentages are king. What a nice guy!

The If Sass Function

Sass comes with the ability to write normal if statements using @if. It does a great job in replicating what you’d find in a traditional programming language to create some fantastic conditional logic.

Sass also provides an inline if function, which works much like the ternary operator in a number of other programming languages:

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

This function accepts three arguments, the first being the condition to check, the second being the output if the condition is true, and the third being the output if the condition is false.

You could use this ternary function if you wanted to create variable-dependent conditions (if the width of an article element is bigger than an aside element, for instance) in your style sheets, though the possibilities with this one are a little more open-ended.

Personally, I find if more useful in responsive projects. You could use this function to change properties based on otherwise unrelated variables (like the font-size of an element depending on the width of its container), or even have properties rely on variables that change at different screen sizes or displays (like changing the background image of an element for retina screens).

Conclusion

Sass has a number of useful functions in its built-in arsenal, and these don’t even include the ones that Compass makes available to you, should you decide to use it. In the end, it’s about what kind of workflow makes sense to you, depending on your project, team and deadlines.

Are there any Sass or Compass functions you’ve come across that you think should be added to the list or that you simply find useful in your projects? Let us know in the comments below.

The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account