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.
Using this Command Line Interface will make updating a Foundation project super easy and help speed up your workflow. The CLI updates your project while leaving your customized styles in tact. We recommend this method since the CLI does many tasks for you.
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.
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.
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.
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:
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:
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:
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.
To update, 'cd' into the project folder in the CLI and the run '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.
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
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:
Next you will run bower update.
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
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
This configuration will work for
Get started quickly and build faster with Foundation using Mixture.io.
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
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.
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.
Every Foundation project needs to include these styles in order to work properly. These include things like basic formatting and global utility classes.