Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Foundation for Apps

Foundation’s Sassy Styles Explained

Read Time:8 minsLanguages:
This post is part of a series called Foundation for Beginners.
Setting up Foundation With Sass and Compass

In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.

Follow the instructions found within Setting up Foundation With Sass and Compass or the Zurb documentation if you need help setting up Foundation with Sass. You can use the command line to get things up and running with Compass and Bourbon, or alternatively just grab the standalone Sass files from GitHub, place them in your project and import whichever bits you need.

and theres plenty to choose fromand theres plenty to choose fromand theres plenty to choose from
..and there are plenty to choose from..

The Grid

Let's begin with the grid as this is the base for Foundation. It's also a great component to show you just how flexible scss/sass can be.


For instance, when using the mixins available for the grid (mixins, by the way, are like shortcuts to pre-written code) you can create your own classes, or even your own grid by using a few simple variables. Let's look at the first example that Foundation gives you:

You can see here that we have a mixin (these are referenced by the '@' sign prefix) which has brackets containing a variable. We start with the mixin @include grid-row, specifying its options within the brackets.

When you create a mixin you can specify parts of the pre-written code to change every time you use that mixin. A simple example would be to create a mixin that adds a font along with its size, weight, colour etc. but maybe you want to be able to change the font colour every time you use the mixin. This would be what you place in the brackets.

In this case we use a variable in the code, variables can be used to store any value in Sass and begin with a '$' sign. For instance:

So in this code we have created a mixin with the customisable option of color, below that we have defined a color using a variable $blue then following that we actually use the mixin, referencing within the brackets our variable $blue, which equates to the hex code #0099cc.

If we refer back to the first code example you will see $behaviour used multiple times. This may seem a little strange and a common interpretation is "Wait! Isn't this just overwriting the variable each time?". Essentially you are providing a value for every option in a type of list, also known as an array. Each time you use $behaviour the output will correspond to the option in the order they are declared.

You may also see multiple variables in your include:

To really put this into perspective, we'll run through creating a grid using only very basic HTML, as classes aren't anywhere near as necessary due to all the styling shortcuts being set in the Sass code itself. Here's a simple example to build a header.


You can see here that the html is minimal and the sass calculates the nesting perfectly, I've also set some global values for the maximum width, the space between columns and the number of columns. From an HTML point of view this saves a fair amount of time, but these thought processes behind layout can be a little confusing to begin with. Let's take a look now at buttons and how you can manipulate them using Sass.


One of the nice things about Sass is just how quickly you can style your pages and how much time you save in not having to duplicate code.


You can shortcut to the button style easily using something simple like:

Add in a few options, and in just one line of code you've replicated a style that would take six or seven lines of CSS, what a time saver!

You'll also notice that for buttons there are a ton of options that don't exist in the CSS version and this is true for all Sass elements. This will really add an extra layer of freedom over the CSS version that you may have previously worked with. Below is an example of a button built using variables, then the same but using direct values, so you can get really good idea of how these work.


This is only a simple example, but it's an example you are likely to make use of on a frequent basis. When the code is compiled you'll end up with CSS like this (and as you can imagine the output code would take much more time to write than that of Sass):

Although many of you will see Sass as an otherworldly language, it is actually very quick to pick up once you have written a few lines. The structure is slightly more enhanced compared with CSS and if you do get stuck you can fallback on CSS using SCSS when you absolutely need to.

Unit Calculator

Finally, one of the lesser written about features of Sass is the ability to add functions to your stylesheets. These aren't dynamic on-page functions (they run when you compile your Sass code) however they do offer interesting opportunities to save yet more time.

For example, in Foundation there is a neat function for converting px to em. This is fantastic for responsive sites; simply set the base em value via:

Then whenever you want to use an em value, for which you would normally have to calculate pixel to em, simply use:

"46" being the number of pixels and em-calc being the function. You can use this anywhere in your Sass code where you would need a pixel value.

Useful Tool

In the last post I mentioned Sass compilers and the huge benefits they have over manual compiling. This time I'm going to point you to a tool I have found useful on almost every project I have ever worked on.

Primarily when talking about Foundation you'll be working with Sass, CSS, HTML and JavaScript, but let's not forget a big part of web design revolves around images, specifically png and jpg files. It's absolutely necessary to have web optimised images, therefore using either imageOptim (OS X) or File Optimizer (Windows).

These tools will compress images without losing any of the quality. It's actually very effective and the compression rates can be mind boggling, with some reductions of up to 70%. Think about it; if you upload a png at 100kb you could be looking at a 30kb file after conversion. This can be even more effective if you make use of sprite images.


Coming Up..

We have looked at the basics of Sass, how it should be setup, what you can do with it and how it can speed up your workflow. In the next piece we'll shift into something rather exciting; Foundation for Rails. This will allow for some cool dynamic functions that can sit alongside your HTML, CSS and JavaScript.

Did you find this post useful?
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.