Bourbon on the Rocks: Cool Functions to Improve Your Sass

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.

Here’s our typographic scale using the golden ratio:

Sass:

$base-font-size: 10px

body
  font-size: $base-font-size

.footnote
  font-size: golden-ratio($base-font-size, -1)
  // decrement size value proportional to golden ratio by factor 1
h3
  font-size: golden-ratio($base-font-size, 1)
h2
  font-size: golden-ratio($base-font-size, 2)
  // increment size value proportional to golden ratio by factor 1
h1
  font-size: golden-ratio($base-font-size, 3)

CSS output:

body {
  font-size: 10px;
}

.footnote {
  font-size: 6.18px;
}

h3 {
  font-size: 16.18px;
}

h2 {
  font-size: 26.179px;
}

h1 {
  font-size: 42.358px;
}

If you need to round the output, you can use Sass’ built in functions for that purpose:

• abs()
• floor()
• ceil()

Sass:

.footnote
  font-size: floor( golden-ratio($base-font-size, -1) )

Under The Hood

Internally, the golden-ratio function is using the modular-scale function, with the scaling variable $golden for golden-ratio.

Sass:

@function golden-ratio($value, $increment) {
  @return modular-scale($value, $increment, $golden)
}

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.

Sass:

$base-font-size: 10px
// Your choice of ratio saved in a variable to change it in one place
// Here I used the double-octave ratio
$type-of-scale: $double-octave

body
  font-size: $base-font-size

.footnote
  font-size: modular-scale($base-font-size, -1, $type-of-scale)

h3
  font-size: modular-scale($base-font-size, 1, $type-of-scale)

h2
  font-size: modular-scale($base-font-size, 2, $type-of-scale)

h1
  font-size: modular-scale($base-font-size, 3, $type-of-scale)

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.

Sass:

$base-font-size: 10px

h2
  font-size: modular-scale($base-font-size, 2, 1.6180)

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:

Sass:

.horrible-gradient
  +background-image(linear-gradient(
    45deg,                // directon of gradient line
    red 10%,              // starting color
    yellow 15%,   // S    // bleeds into red
    yellow 40%,   // T
    orange 45%,   // O    // bleeds into yellow
    orange 50%,   // P
    orange 70%,   // S    // bleeds into green
    green 90%)            // ending color
  )
    height: 50px

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:

• 45deg
• 90deg
• to left top
• to right
• to left

and so on.

Sass: with direction parameter—left to right

.gradient
  +background-image(linear-gradient(to right, yellow 50%, blue 60%))
  height: 50px

The gradient flows from left to right

Or something more sophisticated using hsla() functions and multiple linear-gradient() functions:

Sass:

.gradient
  +background-image(linear-gradient(
    hsla(0, 100%, 100%, 0.25) 0%,
    hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
    linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)))
  height: 50px

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.

Sass:

$light-blue: #2F7DD1

.tint
  background: tint($light-blue, 25%)
  height: 100px

This is without tint():

And this is with tint():

shade()

The shade function changes a color by mixing it with black. This function also takes a color and percentage parameter to fine-tune the color mix.

Sass:

$light-blue: #2F7DD1

.shade
  background: shade($light-blue, 25%)
  height: 100px

Here we see what happens without shade():

And here with shade():

em()

This function calculates pixels to ems for you.

Sass:

font-size: em(12)

CSS output:

font-size: 0.75em;

Cheers!

That’s covered Bourbon nicely for now. Over the last couple of tutorials we have looked in detail at some of the most useful mixins and functions it offers.

In the next part of this ongoing series, we’ll take a look at Bourbon Neat: a grid framework for Sass and Bourbon.