O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Understanding functions and mixins

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); ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required