Getting Started With Sass

Sass is a superset of CSS that adds in amazing features such as variables, nested selectors and loops. It's also the easiest way to customize Foundation!


System Requirements

Before proceeding, you'll want to install the following on your system:

Starting in Foundation 5, we've started using bower to manage the updating process of Foundation. It only needs to be installed one time using the following command:

Bash

[sudo] npm install -g bower grunt-cli

Then you can install our CLI using the following command:

Bash

gem install foundation

Using Foundation With Grunt + Libsass

At ZURB, we prefer to run Foundation with using Grunt in conjunction with Libsass, because it's the fastest way to compile your Sass stylesheets.

Create a New 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

New Project

Updating Your Project

cd MY_PROJECT foundation update

Using Foundation With Compass

Compass is the easiest way to get going with Sass. It can be installed with the following commands:

New Project

foundation new MY_PROJECT

Updating Your Project

cd MY_PROJECT foundation update

Using Foundation with something else

If you prefer using Foundation with a tool that's not listed here, you may want to check out our community page to see if there's a port for you.

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

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