Skip to content

Instantly share code, notes, and snippets.

@mhayes
Last active December 31, 2015 02:09
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mhayes/7919422 to your computer and use it in GitHub Desktop.
Foundation w/Sass standalone

Requirements

Make sure Ruby, Node.js, and bower are setup on your system before continuing.

Setup a new project

Let's call this project my_project. It should look like this:

my_project/
└── bower.json

The bower.json file should contain the following:

{
  "name": "foundation-sass-standalone-app",
  "dependencies": {
    "foundation": "~5.0.2"
  }
}

Then from within the my_project folder you should run bower install. This will download Foundation, jQuery, and Modernizr to the bower_components folder. After running this you should see the following folders present:

my_project/
├── bower_components/
│   ├── foundation/
│   ├── jquery/
│   └── modernizr/
└── bower.json

Setup and import Foundation into your project

Now let's create an scss/app.scss Sass file in this project:

my_project/
├── scss/
│   ├── app.scss
├── bower_components/
│   ├── foundation/
│   ├── jquery/
│   └── modernizr/
└── bower.json

Inside of scss/app.scss let's import Foundation:

@import "foundation";

Compiling Foundation

We'll use the sass command line tool to watch and compile our *.scss files. In the terminal you'll need to install Sass:

gem install sass

Then you can compile your project using the following (run from within the my_project folder):

sass --load-path bower_components/foundation/scss --watch scss:css

The resulting CSS files will be saved to css/app.css.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment