Bourbon offers a handful of super useful functions which are a welcome addition to the native functions that Sass provides. Let’s have a look at some cool examples that you should consider adding to your glass.

Functions

Where mixins help us repeat chunks of styles more efficiently, Sass functions help us with logic: accepting arguments and returning values. Bourbon provides some very handy Sass functions for a variety of use cases. In this tutorial we’ll take a look at the following selection:

golden-ratio()

modular-scale()

linear-gradient

tint()

shade()

em()

golden-ratio()

With this function, it is very easy to calculate the golden ratio (1:1.6180339) of a certain number. As a heads up, I should mention that this function is slowly being deprecated, making way for the modular-scale() function instead. The golden-ratio() function is useful if you want to create “meaningful” relationships within your typography, for example. The same goes for structural relationships within your layout.

Typographic Scale

If you want to generate a modular scale to structure various sizes of type by using the golden ratio, you can apply this function to calculate the golden mean for any number. Building your typographic scale with it is straightforward:

The function’s first parameter expects a pixel or em value–here represented by a Sass variable defined above. The second parameter requires an integer as an increment/decrement value (…-3, -2, -1, 0, 1, 2, 3…) for moving up and down the scale using the golden ratio.

Note: The fantastic Bourbon Neat grid framework also uses the golden ratio by default for gutters and columns.

modular-scale()

If you are into “more meaningful typography” and want to calculate a modular scale for various font sizes, based on some sort of numerical relationship, this function might be interesting to you.
It can calculate various modular scales for you—the golden ratio being just one of seventeen pre-baked options.

Scaling Variables

Bourbon prepared these variables of predefined ratios for various scales. To create a consistent design, it would be a good decsision not to mix different ratios for your typographic scale in one project. Keep it classy by deciding on one ratio that mirrors your intentions best.

linear-gradient()

If you need a linear gradient in combination with your background-image mixin, this function will save you quite a bit of code. The color of the gradient is defined by the starting color, the ending color and optional stop-color points in between. These additional color-stops give you the possiblity to create more sophisticated transitions between the starting and ending colors, or provide a more colorful gradient.

Take a look at this horrible gradient. Here I think it’s easy to see how the linear-gradient() function works and how you can utilize it:

For colors you can optionally provide %, px or em values. These define the distance this color is supposed to stretch out. You should probably stick to using % most of the time though. If you don’t provide percentages as limitation values, the colors will strech out evenly, divided by the number of colors in the gradient.

You can optionally provide an angle for the first parameter—either in form of value + deg or to with direction:

Tint and Shade Color Functions

You might already be familiar with Sass’s built in functions for colors like lighten() and darken() which do exactly what you’d expect. Bourbon provides two additional awesome color functions for your convenience. Both functions take a color and percentage parameter to fine-tune the color mix.

tint()

The tint function changes a color by mixing it with white. It expects a second parameter which takes the percentage of white you want to mix the color with.