--- title: Getting Started With Sass ---
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.
Git is GitHub's version control system, this install basically commands the tools you'll use in the command line to work within GitHub.
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.
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.
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
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.
Until all Sass library's can catch up to Sass 3.4, Foundation will be on Sass 3.2. This means if you have upgraded to Sass 3.4+ and Compass 1.0+ the commands to compile a Compass project have changed slightly. See below...
If it's not installed yet, you can install it 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.
cd MY_PROJECT
Be sure to run compass watch in order to make changes.
bundle (only once per project)
bundle exec compass watch
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.
grunt
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.
Note: Alternatively you can place this somewhere else or move the files around.
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.
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`:
gulp.src('./scss/*.scss')
.pipe(sass({
includePaths: ['bower_components/foundation/scss']
}))
.pipe(gulp.dest('./css'));
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 MoreWith 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 MoreUsing 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 MoreThe complete package! We'll cover the important files that are included when you download Sass and where to make customizations.
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.