Getting Started With Sass

Sass is the easiest way to customize Foundation!

Three Easy Ways to Get Started

Setting up Foundation 5 Sass is quick and easy!

We recommend using the Command Line Interface. We've perfected the command line for quick and easy power, but you can use Foundation with just the files or other applications, like Mixture or CodeKit.

What You'll Need

You'll want to install the following on your system before proceeding:


Git is GitHub's version control system, this install basically commands the tools you'll use in the command line to work within GitHub.

Download Git →


Node allows JavaScript to run outside of the browser, and is necessary for Bower to package all the files into the project and link them together.

Download NodeJS →

Ruby 1.9+

We wrote a Ruby script that downloads the Sass files and scaffolds the project. If you have a Mac, you probably already have Ruby installed.

Download Ruby →

How to Install the CLI

Using the CLI to install Foundation 5 only takes two easy commands. You only have to install the CLI once. Don't want to read? Check out this video we made to help you out.

With the release of Foundation 6, we created a new CLI that supports all three Foundation frameworks. However, it does not create new Foundation 5 projects.

If you still need to create new Foundation 5 projects, stick with the old CLI, the install instructions for which are below. If you're ready to move to Foundation 6, head over to the installation docs for Foundation 6 and the new CLI.


We use Bower to manage updates to Foundation and the third-party libraries that Foundation is built on.

npm install -g bower grunt-cli


Installing the Foundation CLI on your computer only takes one command function.

gem install foundation

Note: If you run into permission errors running these commands in the CLI, you can add the word 'sudo' before the line inside the interface:

sudo npm install -g bower grunt-cli
sudo gem install foundation

If you use rbenv, rehash your shims after installing:

rbenv rehash

Compiling Sass into CSS & Creating a Project

Sass is a great way to speed up front-end development.

SCSS (Sassy CSS) syntax was introduced as "the new main syntax" for Sass and builds on the existing syntax of CSS. We created a SCSS version to allow more friendly and dynamic styling. This version also allows for greater customization than the HTML/CSS version. There are two easy ways our CLI helps you compile SCSS: Compass or Libsass with Grunt.

Creating a Compass Project


If it's not installed already, you can install Compass using the following command:

gem install compass


Next we'll use the Foundation CLI to create a new project:

foundation new MY_PROJECT


Boom, your project is created! Now Foundation will be easy.



Bundler is used to ensure all the correct libraries are used. If you don't have it, run gem install bundler

Then run bundle (only once per project)

Be sure to run compass watch in order to make changes.

bundle exec compass watch

Creating a Libsass Project


First, navigate into the directory where you want to create your project:

cd path/to/sites


Next we'll use the Foundation CLI to create a new project:

foundation new project_name --libsass


Boom, your project is created! Now you need to use Grunt to compile everything before you start working:

cd project_name
grunt build


Be sure to run grunt in order to make changes.


How to Update

Once you have Foundation installed updating your file is easy.


Specify the version you want to update to in your bower.json file.

See an example →


To update, 'cd' into the project folder in the CLI and the run 'bower update.'

bower update

Note: To verify the update has been made, you can see the version number in the bower.json file located in the bower-components folder under foundation.

See an example →

Install Foundation Manually

You can download our SCSS files and get set up to harness the power of Foundation without the CLI if you want. Here's how:

  • First you will need to clone or download the master zip of the Foundation Compass Template from Github. This will be the root of your project.
  • Then you will create a directory called bower_components.
  • The next step is to clone or download the master zip of the bower-foundation repo in that directory.
  • Then rename this directory to "foundation"

Note: Alternatively you can place this somewhere else or move the files around.

  • Just update your config.rb so that the add_import_path reflects the change i.e. add_import_path "bower_components/foundation/scss"
  • Then add jQuery and update the link in index.html to a local copy that you can download from the jQuery site.

Upgrade Manually With Compass

You'll need to install NodeJS and Bower before updating with Compass.

Note: You can install bower by running the following command:

npm install -g bower

We use bower to keep Foundation assets up to date within your project. Here's how you can update your project:


First, you need create a file named bower.json in the root of your Compass project. This should contain the following:

    "name": "PROJECT_NAME",
    "dependencies": {
       "foundation": "~5.4.7"


Next you will run bower update.

bower update

This will create a directory called bower_components/ in your project. Foundation's Sass and JavaScript files will be placed in the bower_components/foundation folder.

Check out what you get with the Sass download package. →

Build Using a Task Runner

Using Bower and a task runner like Grunt or Gulp, you can add our Sass files to your build process.


In a project with an existing bower.json, add Foundation to your bower components:

bower install foundation --save


Next, add bower_components/foundation/scss to your Sass compiler's import paths. The exact setting you need to change will depend on the plugin you're using. For example, this is how to add Foundation to a Grunt task using grunt-contrib-sass:

sass: {
  dist: {
    options: {
      style: 'expanded'
      loadPath: ['bower_components/foundation/scss']
    files: {
      'main.css': 'main.scss',
      'widgets.css': 'widgets.scss'

This configuration will work for gulp-sass:

    includePaths: ['bower_components/foundation/scss']

Third Party Applications

If you want a more hands-off and simple build of Foundation you can use these platforms to code with Foundation.


Get started quickly and build faster with Foundation using

Publish your project online. It’s as easy as one click. Share your published URL, password protect, get feedback, client sign-off or even add your own domain and host your site.

Learn More


A Mac app that allows you to build websites faster with Foundation.

With zero setup and Bower built right into the system, CodeKit can compile any language with one click updates. From auto-refresh browsers to built-in minifiers, CodeKit has everything inside to help you get started.

Learn More


Build your websites locally with the ease and flexibility of Foundation.

Using Cactus allows you to put the components of your website together with your local server without having to set up a server environment like Ruby. You can use it on your Mac to compile your SASS, start building templates, or for directing visual feedback.

Learn More

What's Next?

Now that you have Foundation Sass installed, check out the awesome stuff you get and how to use it.

What You Get

The complete package! We'll cover the important files that are included when you download Sass and where to make customizations.

See What's Inside →

How to Use

Harness SCSS's variable features easily through the included _settings.scss file. We cover important tips on the settings file, writing sass, and using mixins.

Find Out How →

Global Styles

Every Foundation project needs to include these styles in order to work properly. These include things like basic formatting and global utility classes.

Take a Look →

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »