Advertisement
  1. Web Design
  2. Sass
Webdesign

Bourbon on the Rocks: Cool Functions to Improve Your Sass

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
One for the Road: More Tasty Bourbon Mixins
Bourbon Neat: Semantic, Unopinionated, Responsive Grids

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:

CSS output:

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

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

Sass:

Under The Hood

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

Sass:

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:

Scaling Variables

file

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:

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:

file

Sass:

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

file

The gradient flows from left to right

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

Sass:

file

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:

This is without tint():

file

And this is with tint():

file

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:

Here we see what happens without shade():

file

And here with shade():

file

em()

This function calculates pixels to ems for you.

Sass:

CSS output:

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.