<% @side_nav = "using" %> <% @page_title = "Sass" %>

Using the Sass Version of Foundation

Start using Foundation the way you want, with more control than ever before. We've made it really easy to install using Compass so you'll need a little bit of knowledge before you get going. Visit the Compass and Sass sites to learn the basics if you don't already know them.

Recommended Installation

To create your first project using our Compass extension, you'll need to have the zurb-foundation gem installed. This will install Foundation and all necessary dependencies. Here's the command that will do this for you:

[sudo] gem install zurb-foundation


Note: Make sure ZURB isn't all caps.

Upgrading Your Gem

To upgrade your gem to the latest public release, just paste this snippet into your command line:

[sudo] gem update zurb-foundation

Release Candidates

Stay on top of the latest before official releases by installing release candidates with this command:

[sudo] gem install zurb-foundation --pre


Creating your first project

Compass makes it really easy to start a new project. Since you've installed the Foundation gem by now, you now have Compass, Sass and a few other necessary dependencies available at your fingertips.

Follow these two steps to get going:

  1. cd path/to/where-you-want-your-project
  2. run compass create <project-name> -r zurb-foundation --using foundation

Using Sass Standalone

With Foundation 4, we've removed all dependencies from the framework. This means you can use Foundaiton with Sass alone and add Compass, Bourbon, or whatever on top of it. To help get going using only Sass, you'll just need to download the files from Github (grab the scss/ and js/ directories) and put them into your project directory. From there you just need to @import the parts of Foundation you need.

To import all of Foundation:

<%= code_example ' @import "/path/to/foundation"; ', :css %>

If you want to override the built in variables, you can find them on each component page or grab that entire list from Github. From there, you'll need to link your settings file above your Foundation import, like so:

<%= code_example ' @import "/path/to/settings"; @import "/path/to/foundation"; ', :css %>

If you want to pick and choose which pieces of Foundation you want, the pieces you need are:

<%= code_example ' @import "foundation/foundation-global"; @import "foundation/components/global"; /* Each individual part that can be added in */ @import "foundation/components/grid"; @import "foundation/components/visibility"; @import "foundation/components/block-grid"; @import "foundation/components/type"; @import "foundation/components/buttons"; @import "foundation/components/forms"; @import "foundation/components/custom-forms"; @import "foundation/components/button-groups"; @import "foundation/components/dropdown-buttons"; @import "foundation/components/split-buttons"; @import "foundation/components/flex-video"; @import "foundation/components/section"; @import "foundation/components/top-bar"; @import "foundation/components/orbit"; @import "foundation/components/reveal"; @import "foundation/components/joyride"; @import "foundation/components/clearing"; @import "foundation/components/alert-boxes"; @import "foundation/components/breadcrumbs"; @import "foundation/components/keystrokes"; @import "foundation/components/labels"; @import "foundation/components/inline-lists"; @import "foundation/components/pagination"; @import "foundation/components/panels"; @import "foundation/components/pricing-tables"; @import "foundation/components/progress-bars"; @import "foundation/components/side-nav"; @import "foundation/components/sub-nav"; @import "foundation/components/switch"; @import "foundation/components/magellan"; @import "foundation/components/tables"; @import "foundation/components/thumbs"; @import "foundation/components/tooltips"; @import "foundation/components/dropdown"; ', :css %>

Compiling Your Scss with Compass

To compile your Scss into CSS you run a simple command that will watch for saves and compile each time you save an Scss file. From the directory of your config.rb file, the command is:

compass watch


If you are in a different directory you can use the same command, but navigate to where your config.rb file is. The command looks like:

compass watch path/to/project

Compiling Your Scss with Sass

sass --watch your/scss/directory:your/css/directory


You can watch individual files or the entire directory, we usually watch the entire directory when using Sass standalone.

Working with Existing projects

There are a couple situations to cover here. You might be adding Foundation to an existing project that wasn't build with Foundation or you might be upgrading Foundation for an already created Foundation Compass project.
Adding Foundation to existing Compass projects

If you've created a project using Compass, but didn't require the Foundation gem, you'll need to install it separately. When you do this you'll get all the necessary files on top of the ones you already have. If something is a duplicate, Compass will ignore it. The steps you'll take to properly install Foundation are:

  1. Add require "zurb-foundation" to your config.rb file
  2. cd path/to/your-project
  3. run compass install foundation

Creating a project from Git

Sometimes you want to checkout what we've got even before we decide to deploy a release candidate. For these situations, you can install using Bundler.

There are a few different ways to do this, but here's what we recommend:

  1. Setup a folder for your project (i.e. mkdir ~/awesomeapp)
  2. Create a file called Gemfile in the folder you just created with this content:
    <%= code_example ' source "https://rubygems.org" gem "zurb-foundation", :git => "git@github.com:zurb/foundation.git" gem "compass" ', :ruby %>
  3. Change into your application directory (cd ~/awesomeapp) then create a new compass project using the following command:
    4. <%= code_example ' bundle exec compass create . -r zurb-foundation --using foundation ', :bash %>
  4. When you're working on your project, run: bundle exec compass watch

Running multiple versions

If you're planning on running multiple, potentially incompatible versions of Foundation you can isolate them using Bundler as well.

There are a few different ways to do this, but here's what we recommend:

  1. Setup a folder for your project (i.e. mkdir ~/awesomeapp)
  2. Create a file called Gemfile in the folder you just created with this content:
    <%= code_example ' source "https://rubygems.org" # Replace 4.0.3 with the version of Foundation you want to use gem "zurb-foundation", "4.0.3" gem "compass" ', :ruby %>
  3. Change into your application directory (cd ~/awesomeapp) then create a new compass project using the following command:
    4. <%= code_example ' bundle exec compass create . -r zurb-foundation --using foundation ', :bash %>
  4. When you're working on your project, run: bundle exec compass watch

Foundation Global Settings and Mixins

We've inlcluded a global settings file that holds veriables and mixins that are used throughout the entirety of Foundation. Here's a look at that file:

<%= code_example ' // Foundation Global Function, Variables and Mixins // // Variables // // This is the default html and body font-size for the base em value. $em-base: 16px; // We use these to control various global styles $body-bg: #fff; $body-font-color: #222; $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; $body-font-weight: normal; $body-font-style: normal; // We use this to control font-smoothing $font-smoothing: antialiased; // We use these to control text direction settings $text-direction: ltr; // We use these as default colors throughout $primary-color: #2ba6cb; $secondary-color: #e9e9e9; $alert-color: #c60f13; $success-color: #5da423; // We use these to make sure border radius matches unless we want it different. $global-radius: 3px; $global-rounded: 1000px; // We use these to control inset shadow shiny edges and depressions. $shiny-edge-size: 0 1px 0; $shiny-edge-color: rgba(#fff, .5); $shiny-edge-active-color: rgba(#000, .2); // We use this to control whether or not CSS classes come through in the gem files. $include-html-classes: true; $include-print-styles: true; // // Functions // // Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) @function emCalc($pxWidth) { @return $pxWidth / $em-base * 1em; } // Creating rems and pixels @function remCalc($pxWidth) { @return $pxWidth / $em-base * 1rem; } // Grid Calculation for Percentages @function gridCalc($colNumber, $totalColumns) { @return percentage(($colNumber / $totalColumns)); } // // Mixins // // We use this to control border radius. @mixin radius($radius:$global-radius) { @if $radius { -webkit-border-radius: $radius; border-radius: $radius; } } // We use this to create equal side border radius on elements. @mixin side-radius($side, $radius) { @if $side == left { -webkit-border-radius: $radius 0 0 $radius; border-radius: $radius 0 0 $radius; } @else if $side == right { -webkit-border-radius: 0 $radius $radius 0; border-radius: 0 $radius $radius 0; } @else if $side == top { -webkit-border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0; } @else if $side == bottom { -webkit-border-radius: 0 0 $radius $radius; border-radius: 0 0 $radius $radius; } } // We can control whether or not we have inset shadows edges. @mixin inset-shadow($active:true) { -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset; box-shadow: $shiny-edge-size $shiny-edge-color inset; @if $active { &:active { -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset; box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } } } // We use this to add transitions to elements @mixin single-transition($property:all, $speed:300ms, $ease:ease-out) { -webkit-transition: $property $speed $ease; -moz-transition: $property $speed $ease; transition: $property $speed $ease; } // We use this to add box-sizing across browser prefixes @mixin box-sizing($type:border-box) { -moz-box-sizing: $type; -webkit-box-sizing: $type; box-sizing: $type; } // We use this to create equalateral triangles @mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) { content: ""; display: block; width: 0; height: 0; border: solid $triangle-size; @if ($triangle-direction == top) { border-color: $triangle-color transparent transparent transparent; } @if ($triangle-direction == bottom) { border-color: transparent transparent $triangle-color transparent; } @if ($triangle-direction == left) { border-color: transparent transparent transparent $triangle-color; } @if ($triangle-direction == right) { border-color: transparent $triangle-color transparent transparent; } } // We use this to do clear floats @mixin clearfix() { *zoom:1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Media Queries $small-screen: emCalc(768px); $medium-screen: emCalc(1280px); $large-screen: emCalc(1440px); $small: "only screen and (min-width:"#{$small-screen}")" !default; $medium: "only screen and (min-width:"#{$medium-screen}")" !default; $large: "only screen and (min-width:"#{$large-screen}")" !default; ', :css %>
<%= render "_sidebar.html.erb" %>