Menu icon Foundation
Foundation Variables and Mixins Not Working Correctly

I have Foundation installed with Bower, and I'm including the path in my gulp task like so:

    .pipe(sass({
        includePaths: [
            'bower_components/foundation/scss'
        ],
        outputStyle: 'expanded'
    })

When I `@import 'foundation';` into my stylesheet it seems to work fine. But when I start to reference its SASS variables I start getting errors like the one below:

    Error: unbound variable $medium-up

Any idea why this is happening?

Thanks in advance!

FoundationSassbower

I have Foundation installed with Bower, and I'm including the path in my gulp task like so:

    .pipe(sass({
        includePaths: [
            'bower_components/foundation/scss'
        ],
        outputStyle: 'expanded'
    })

When I `@import 'foundation';` into my stylesheet it seems to work fine. But when I start to reference its SASS variables I start getting errors like the one below:

    Error: unbound variable $medium-up

Any idea why this is happening?

Thanks in advance!

Rafi Benkual over 4 years ago

Your include path looks quite different than our Gulp setup, though I am not an expert on this. This article should help though:

http://www.revsys.com/blog/2014/oct/21/ultimate-front-end-development-setup/

Sample Gulpfile

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var gzip = require('gulp-gzip');
var livereload = require('gulp-livereload');

var gzip_options = {
    threshold: '1kb',
    gzipOptions: {
        level: 9
    }
};

/* Compile Our Sass */
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('static/stylesheets'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('static/stylesheets'))
        .pipe(gzip(gzip_options))
        .pipe(gulp.dest('static/stylesheets'))
        .pipe(livereload());
});

/* Watch Files For Changes */
gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('scss/*.scss', ['sass']);

    /* Trigger a live reload on any Django template changes */
    gulp.watch('**/templates/*').on('change', livereload.changed);

});

gulp.task('default', ['sass', 'watch']);