Now that we have explored the anatomy of a function, you will quickly come to the conclusion that have the need to build custom functions. Luckily, Sass allows us to do that and has a plethora of tools to be able to create custom functions.
Functions must be used in areas where there is a need for a series of processes that will result in a desired output. For example, we may need to take a string and reverse it, modify a given list, or make a simple calculation to get the 'em' value of a given pixel value. Let's take a look at the anatomy of a function.
Functions can be very powerful and useful in the world of Sass and CSS. Repeated calculations or abstracted sub-routines are prime example of where functions can become handy. A simple example of a function is to evaluate the color of a font based on the given background color.
In the following example you will see that we are creating the function of set-font-color. This function will take two arguments, $background-color and $default-font-color.
Within the function I will take the value of $default-font-color and reassign it to the variable of $font-color within the scoped context of this function. Next I will evaluate the lightness of the value assigned to $background-color to see if it is greater then 50%. The lightness function1 is a build in Sass funciton.
If that value is greater then 50%, then the value of $font-color is set to the inverse of $default-font-color. Again, invert2 is a built in Sass function.
What's interesting to note is that we are using the @if statement in a single case. It's only if the color passes that test that the value will be updated and then passed to the return. If not, then the original value of $font-color will get passed to the @return statement.
As a last nugget, we created a short hand version of the function as well, called sfc.
@function set-font-color($background-color, $default-font-color) {
$font-color: $default-font-color;
@if lightness($background-color) > 50% {
$font-color: invert($default-font-color);
}
@return $font-color;
}
@function sfc($background-color, $default-font-color) {
@return set-font-color($background-color, $default-font-color);
}
Now that we have our function, how do we use it? Illustrated in the following code example we did a few things to take note of. There are two selectors, button and .secondary-button. With the first button selector we set our default background-color and then for the text color we will use our new function to evaluate the value of $button-default-bg-color against the value of $button-default-font-color.
We do this again with the second selector of .secondary-button as to determine the type color for that button as well.
button {
@include opacity(100);
width: auto;
min-width: 100px;
height: 30px;
text-align: center;
font-size: em(12px);
line-height: 1;
margin: em(10px);
display: inline-block;
position: relative;
background-color: $button-default-bg-color;
color: sfc($button-default-bg-color, $button-default-font-color);
}
.secondary-button {
background-color: $light-gray;
color: sfc($light-gray, $button-default-font-color);
}
The power of functions can become more evident when there are heavy calculations involved. Grid system calculation or geometric calculations for games are prime examples. Let's look at Bourbon's Neat application and the way that they use functions to calculate the grid system implementation. Before we dive into the code, let's review what we are trying to achieve when we create a grid system in CSS.