Now that we understand variables, let's move on to functions and mixins. A function is SCSS code that will perform some operation(s) and return a single value. A mixin is used to combine styles that you want to use repeatedly. By including a mixin you get all those styles automatically without having to remember and repeat them.
There are some functions defined near the top of your custom variables file. Let's look at one of those:
@function emCalc($pxWidth) {
@return $pxWidth / $em-base * 1em;
}This function converts a number representing pixels into em units. It is a simple function that allows you to think in pixels, yet specify your CSS in em units. The following is an example:
.emphasis {
font-size: emCalc(24);
}This results in the following CSS:
.emphasis {
font-size: 1.5em; }The function emCalc(24) returned the value 1.5em. To call a function you simply use the function in place of a value or variable.
The following is a simple mixin that you can...