Advertisement

Foundation's Sassy Styles Explained

by
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 there's 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.

foundationgrid

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:

/* Mixin options creating rows */
@include grid-row($behavior);

/* The default value is false, which will bring in the default row styles */
$behavior: false

/* If the element you are creating as a row is nested within another element */
/* that is also a row, you need to add the proper nesting styles */
$behavior: nest

/* You can use this option to collapse the container row margins */
/* This comes in handy when working with forms inside the grid */
$behavior: collapse

/* If you have a nested row and want it to be collapsed, you need to add this option */
$behavior: nest-collapse

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:


/* here we create the mixin */
@mixin font($color) {
font-family: 'Arial';
font-size: 14px;
font-weight: 500;
color: $color;
}

/* here we define a variable to use within it */
$blue = #0099cc;

/* and here we actually use the mixin*/
@include font($blue);

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:

 @include grid-column($columns, $last-column);

/* The most commonly used option with a column */
 /* This sets the width properties for the column, use a number to represent columns */
 $columns: #
 /* Use this option if your columns do not add up to 12. */
 /* We make the last column default to float:right to keep things aligned */
 /* If you do not want this, set $last-column to true */
 $last-column: false

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.


<header>
<aside></aside>
    <section>
       <article>
          <header></header>
          <div></div>
       </article>
    </section>
</header>
$row-width: em-calc(600);
$column-gutter: em-calc(30);
$total-columns: 12 !default;

header { @include grid-row; @include panel;
    aside { @include grid-column(3); }
    section { @include grid-column(9);
       article { @include grid-row;
          header { @include grid-column(2); }
          div { @include grid-column(10); }
       }
    }
}
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.


Buttons

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.

foundationbuttons

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

.your-class-name { @include button; }

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.


.your-class-name {
    @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
    @include inset-shadow($active);
}
.your-class-name {
    @include button(1em, #ca2727, 2px, false, false, false);
    @include inset-shadow(true);
}
button

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):


.link {
border-style: solid;
border-width: 1px;
cursor: pointer;
font-family: inherit;
font-weight: bold;
line-height: normal;
margin: 0 0 1.25em;
position: relative;
text-decoration: none;
text-align: center;
display: inline-block;
padding-top: 1em;
padding-right: 2em;
padding-bottom: 1.0625em;
padding-left: 2em;
font-size: 1.25em;
background-color: #ca2727;
border-color: #9f1f1f;
color: white;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

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:

$em-base: 16px!default;

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

height:em-calc(46);

"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.

image-compress

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.

Advertisement