Make sure Ruby, Node.js, and bower are setup on your system before continuing.
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
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";
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
.