Getting Started With Sass

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.

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'));