Deprecation warning using Foundation 5.5 makes grunt task fail

Question

I'm trying to run an AngularJS project based on Yeoman's generator, but using Zurb Foundation 5.5.3

I've read that Foundation 5.4 had some issues if it's compiled with Sass 3.4.2, but apparently Foundation 5.5 is keeping it. When I try to run sass tasks, the build process is failing due to the deprecation warnings. Here's the log:

Running "wiredep:sass" (wiredep) task

Running "concurrent:server" (concurrent) task
    Warning: DEPRECATION WARNING on line 78 of C:/Users/lperea/Documents/Proyectos/Kairos/kronos-imasd-frontend/bower_components/foundation/scss/foundation/components/_top-bar.scss: #{} interpolation near operators will be simplified
    in a future version of Sass. To preserve the current behavior, use quotes:

      unquote("#{lower-bound($medium-range)}") Use --force to continue.

Here's my Gruntfile:

/**
 * Created by lperea on 12/01/2016.
 */

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function(grunt) {
  // Carga automatica de tareas que matcheen con los patrones especificados
  require('load-grunt-tasks')(grunt, {pattern: ['grunt-*', '@*/grunt-*']});

  // Visualizacion del tiempo consumido por cada tarea
  require('time-grunt')(grunt);



  // Carga automatica de plugins para ejecutar tareas de Grunt
  require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin',
    ngtemplates: 'grunt-angular-templates',
    cdnify: 'grunt-google-cdn'
  });

  // Paths configurables de la aplicacion
  var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: 'dist'
  };

  // Configuracion inicial de todas las tareas
  grunt.initConfig({
    // Generador dinamico de constantes y modulos
    ngconstant: {
      options: {
        space: ' ',
        name: 'config',
        dest: 'app/scripts/config.js',
        values: {
          debug: true
        }
      },
      dev: {
        constants: grunt.file.readJSON('devconfig.json')
      },
      test: {
        constants: grunt.file.readJSON('testconfig.json')
      },
      prod: {
        constants: grunt.file.readJSON('prodconfig.json')
      },
      build: {}
    },

    // Ajustes del proyecto
    yeoman: appConfig,

    // Ajustes del servidor de Grunt
    connect: {
      options: {
        port: 9000,
        hostname: 'localhost', // '0.0.0.0' -> para acceso remoto al servidor.
        livereload: 35729
      },
      livereload: {
        options: {
          open: true,
          middleware: function(connect) {
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect().use(
                '/app/styles',
                connect.static('./app/styles')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },
      test: {
        options: {
          port: 9001,
          middleware: function(connect) {
            return [
              connect.static('.tmp'),
              connect.static('test'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },
      dist: {
        options: {
          open: true,
          base: '<%= yeoman.dist %>'
        }
      }
    },

    // Verifica cambios en archivos y ejecuta las tareas indicadas
    watch: {
      bower: {
        files: ['bower.json'],
        tasks: [
          'wiredep' // Inyeccion de componentes bower en la aplicacion
        ]
      },
      compass: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        tasks: [
          'compass:server', // Compila sass a css
          'autoprefixer:server' // Preprocesa el css generado
        ]
      },
      styles: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
        tasks: ['copy:styles', 'autoprefixer']
      },
      js: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
        tasks: [
          'newer:jscs:all' // Verificacion jscs
        ],
        options: {
          livereload: '<%= connect.options.livereload %>'
        }
      },
      jsTest: {
        files: ['test/spec/{,*/}*.js'],
        tasks: [
          'newer:jscs:test', // Verificacion jscs
          'karma' // Ejecucion de tests con karma
        ]
      },
      gruntfile: {
        // No se hace nada si cambia el gruntfile
        files: ['Gruntfile.js']
      },
      livereload: {
        options: {
          livereload: '<%= connect.options.livereload %>'
        },
        files: [
          '<%= yeoman.app %>/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
      }
    },

    // TODO: Reemplazar con grunt-postcss
    autoprefixer: {
      options: {
        browsers: ['last 1 version']
      },
      server: {
        options: {
          map: true
        },
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '.tmp/styles/'
        }]
      },
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '.tmp/styles/'
        }]
      }
    },

    // Compila Sass a CSS y genera los archivos necesarios si se lo solicita
    compass: {
      options: {
        sassDir: '<%= yeoman.app %>/styles',
        cssDir: '.tmp/styles',
        //generatedImagesDir: '.tmp/images/generated',
        //imagesDir: '<%= yeoman.app %>/images',
        javascriptsDir: '<%= yeoman.app %>/scripts',
        fontsDir: '<%= yeoman.app %>/styles/fonts',
        importPath: './bower_components',
        httpImagesPath: '/images',
        httpGeneratedImagesPath: '/images/generated',
        httpFontsPath: '/styles/fonts',
        relativeAssets: false,
        assetCacheBuster: false,
        raw: 'Sass::Script::Number.precision = 10\n'
      },

      dist: {
        options: {
          generatedImagesDir: '<%= yeoman.dist %>/images/generated'
        }
      },
      server: {
        options: {
          debugInfo: true,
          sourcemap: true
        }
      }
    },

    // Verifica estilos de codigo en base a jscs
    jscs: {
      options: {
        config: '.jscsrc',
        reporter: require('jscs-stylish').path,
        esnext: true, // If you use ES6 http://jscs.info/overview.html#esnext
        verbose: true,
        requireCurlyBraces: ['if']
      },
      all: {
        src: [
          'Gruntfile.js',
          '<%= yeoman.app %>/scripts/{,*/}*.js'
        ]
      },
      test: {
        options: {
          config: 'test/.jscsrc',
          reporter: require('jscs-stylish').path,
          esnext: true, // If you use ES6 http://jscs.info/overview.html#esnext
          verbose: true,
          requireCurlyBraces: ['if']
        },
        src: ['test/spec/{,*/}*.js']
      }
    },

    // Elimina carpetas temporales y de distribucion
    clean: {
      dist: {
        files: [{
          dot: true,
          src: [
            '.tmp',
            '<%= yeoman.dist %>/{,*/}*',
            '!<%= yeoman.dist %>/.git{,*/}*'
          ]
        }]
      },
      server: '.tmp'
    },

    // Inyeccion automatica de componentes de bower en la aplicacion
    // TODO: verificar si esta bien ignorar el path de bower_components
    wiredep: {
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath: /\.\.\//
      },
      sass: {
        src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        ignorePath: /(\.\.\/){1,2}bower_components\//
      }
    },

    sass: {
      dist: {
        options: {
          style: 'expanded',
          loadPath: ['bower_components/foundation/scss']
        }
      }
    },
    // Agrega un hash al nombre de los archivos para cacheo del browser
    filerev: {
      dist: {
        src: [
          '<%= yeoman.dist %>/scripts/{,*/}*.js',
          '<%= yeoman.dist %>/styles/{,*/}*.css',
          '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
          '<%= yeoman.dist %>/styles/fonts/*'
        ]
      }
    },

    // Lee bloques de usemin en los HTML para hacer builds que ejecuten las tareas
    // de concat, minify and revision files. Crea configuraciones en memoria para que
    // otras tareas puedan utilizarlas
    useminPrepare: {
      html: '<%= yeoman.app %>/index.html',
      options: {
        dest: '<%= yeoman.dist %>',
        flow: {
          html: {
            steps: {
              js: ['concat', 'uglifyjs'],
              css: ['cssmin']
            },
            post: {}
          }
        }
      }
    },

    // Reescribe archivos en funcion de la configuracion de filerev y useminPrepare
    usemin: {
      html: ['<%= yeoman.dist %>/{,*/}*.html'],
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images']
      }
    },

    // Compresion de imagenes
    imagemin: {
      dist: {
        files: [{
          expand: true,
          cwd: '<%= yeoman.app %>/images',
          src: '{,*/}*.{png,jpg,jpeg,gif}',
          dest: '<%= yeoman.dist %>/images'
        }]
      }
    },

    // Compresion de archivos svg
    svgmin: {
      dist: {
        files: [{
          expand: true,
          cwd: '<%= yeoman.app %>/images',
          src: '{,*/}*.svg',
          dest: '<%= yeoman.dist %>/images'
        }]
      }
    },

    // Minificacion html
    htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          conservativeCollapse: true,
          collapseBooleanAttributes: false,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true
        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/{,*/}*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    },

    // Transforma inyecciones de dependencia a la version larga de Angular (seguro para la minificacion))
    ngAnnotate: {
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/concat/scripts',
          src: ['*.js', '!oldieshim.js'],
          dest: '.tmp/concat/scripts'
        }]
      }
    },

    // Reemplaza referencias locales a referencias CDN
    cdnify: {
      dist: {
        html: ['<%= yeoman.dist %>/*.html']
      }
    },

    // Copia archivos a ubicaciones que utilizan otras tareas
    // TODO: elminar copia de archivos bootstrap y chequear copiado de componentes de bower.
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>', // Directorio base
          dest: '<%= yeoman.dist %>', // Destino de archivos a copiar
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'views/{,*/}*.html',
            'bower_components/**/*/*.css',
            'images/{,*/}*.{webp}',
            'fonts/{,*/}*.*'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          //For font-awesome
          expand: true,
          dot: true,
          cwd: 'bower_components/font-awesome',
          src: ['fonts/*.*'],
          dest: '<%= yeoman.dist %>'
        }]
      },
      styles: {
        expand: true,
        cwd: '<%= yeoman.app %>/styles',
        dest: '.tmp/styles/',
        src: ['{,*/}*.css', 'bower_components/**/*/*.css']
      },
      fonts: {
        expand: true,
        flatten: true,
        cwd: '<%= yeoman.app %>',
        dest: '<%= yeoman.dist %>/fonts',
        src: [
          'bower_components/font-awesome/fonts/*'
        ]
      }
    },

    // Ejecucion de tareas en paralelo
    concurrent: {
      server: [
        'compass:server'
      ],
      test: [
        'compass'
      ],
      dist: [
        'compass:dist',
        'imagemin',
        'svgmin'
      ]
    },

    // Ajustes de la ejecucion de tests
    karma: {
      unit: {
        configFile: 'test/karma.conf.js',
        singleRun: true
      }
    }

  });

  grunt.registerTask(
    'serve',
    'Compila y luego inicia conexion a un servidor web',
    function(target) {
      if (target === 'dist') {
        grunt.task.run([
          'ngconstant:dev',
          'build',
          'connect:dist:keepalive'
        ]);
      } else {
        grunt.task.run([
          'ngconstant:dev',
          'clean:server',
          'wiredep',
          'concurrent:server',
          'autoprefixer',
          'connect:livereload',
          'watch'
        ]);
      }
    });

  grunt.registerTask(
    'test',
    'Compila y ejecuta los tests unitarios',
    function(target) {
      if (!target) {
        target = 'dev';
      }
      switch (target) {
        case 'dev':
          grunt.task.run(['ngconstant:dev']);
          break;
        case 'test':
          grunt.task.run(['ngconstant:test']);
          break;
        case 'prod':
          grunt.task.run(['ngconstant:prod']);
          break;
      }

      grunt.task.run([
        'clean:server',
        'concurrent:test',
        'autoprefixer',
        'connect:test',
        'karma'
      ]);
    });

  grunt.registerTask(
    'build',
    'Compila y prepara codigo minificado en una carpeta aparte',
    function(target) {
      if (!target) {
        target = 'dev';
      }
      switch (target) {
        case 'dev':
          grunt.task.run(['ngconstant:dev']);
          break;
        case 'test':
          grunt.task.run(['ngconstant:test']);
          break;
        case 'prod':
          grunt.task.run(['ngconstant:prod']);
          break;
      }

      grunt.task.run([
        'clean:dist',
        'wiredep',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'concat',
        'ngAnnotate',
        'copy:dist',
        'cdnify',
        'cssmin',
        'uglify',
        'filerev',
        'usemin',
        'htmlmin'
      ]);
    });

  grunt.registerTask('default', [
    'newer:jscs',
    'ngconstant:dev',
    'test',
    'build'
  ]);

};

I'm using compass 1.0.3 and sass 3.4.2.

Answer 1

it looks like those versions of SASS 3.4.2 and Foundation 5.5.3 don't get along well because Foundation 5.5.3 is using a deprecated SASS feature, to work around this you can either: upgrade your version of Foundation, or do as suggested in the message you can go to line 78 of _top-bar.scss and replace

#{lower-bound($medium-range)}

with:

unquote("#{lower-bound($medium-range)}")

to succesfully complete the build process.

Hope this helps!