title: Deprecation warning using Foundation 5.5 makes grunt task fail
body: <p>I'm trying to run an AngularJS project based on Yeoman's generator, but using Zurb Foundation 5.5.3</p>
  
  <p>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:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>Here's my Gruntfile:</p>
  
  <pre><code>/**
   * 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' -&gt; 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: '&lt;%= yeoman.dist %&gt;'
          }
        }
      },
  
      // 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: ['&lt;%= yeoman.app %&gt;/styles/{,*/}*.{scss,sass}'],
          tasks: [
            'compass:server', // Compila sass a css
            'autoprefixer:server' // Preprocesa el css generado
          ]
        },
        styles: {
          files: ['&lt;%= yeoman.app %&gt;/styles/{,*/}*.css'],
          tasks: ['copy:styles', 'autoprefixer']
        },
        js: {
          files: ['&lt;%= yeoman.app %&gt;/scripts/{,*/}*.js'],
          tasks: [
            'newer:jscs:all' // Verificacion jscs
          ],
          options: {
            livereload: '&lt;%= connect.options.livereload %&gt;'
          }
        },
        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: '&lt;%= connect.options.livereload %&gt;'
          },
          files: [
            '&lt;%= yeoman.app %&gt;/{,*/}*.html',
            '.tmp/styles/{,*/}*.css',
            '&lt;%= yeoman.app %&gt;/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: '&lt;%= yeoman.app %&gt;/styles',
          cssDir: '.tmp/styles',
          //generatedImagesDir: '.tmp/images/generated',
          //imagesDir: '&lt;%= yeoman.app %&gt;/images',
          javascriptsDir: '&lt;%= yeoman.app %&gt;/scripts',
          fontsDir: '&lt;%= yeoman.app %&gt;/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: '&lt;%= yeoman.dist %&gt;/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',
            '&lt;%= yeoman.app %&gt;/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',
              '&lt;%= yeoman.dist %&gt;/{,*/}*',
              '!&lt;%= yeoman.dist %&gt;/.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: ['&lt;%= yeoman.app %&gt;/index.html'],
          ignorePath: /\.\.\//
        },
        sass: {
          src: ['&lt;%= yeoman.app %&gt;/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: [
            '&lt;%= yeoman.dist %&gt;/scripts/{,*/}*.js',
            '&lt;%= yeoman.dist %&gt;/styles/{,*/}*.css',
            '&lt;%= yeoman.dist %&gt;/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            '&lt;%= yeoman.dist %&gt;/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: '&lt;%= yeoman.app %&gt;/index.html',
        options: {
          dest: '&lt;%= yeoman.dist %&gt;',
          flow: {
            html: {
              steps: {
                js: ['concat', 'uglifyjs'],
                css: ['cssmin']
              },
              post: {}
            }
          }
        }
      },
  
      // Reescribe archivos en funcion de la configuracion de filerev y useminPrepare
      usemin: {
        html: ['&lt;%= yeoman.dist %&gt;/{,*/}*.html'],
        css: ['&lt;%= yeoman.dist %&gt;/styles/{,*/}*.css'],
        options: {
          assetsDirs: ['&lt;%= yeoman.dist %&gt;', '&lt;%= yeoman.dist %&gt;/images']
        }
      },
  
      // Compresion de imagenes
      imagemin: {
        dist: {
          files: [{
            expand: true,
            cwd: '&lt;%= yeoman.app %&gt;/images',
            src: '{,*/}*.{png,jpg,jpeg,gif}',
            dest: '&lt;%= yeoman.dist %&gt;/images'
          }]
        }
      },
  
      // Compresion de archivos svg
      svgmin: {
        dist: {
          files: [{
            expand: true,
            cwd: '&lt;%= yeoman.app %&gt;/images',
            src: '{,*/}*.svg',
            dest: '&lt;%= yeoman.dist %&gt;/images'
          }]
        }
      },
  
      // Minificacion html
      htmlmin: {
        dist: {
          options: {
            collapseWhitespace: true,
            conservativeCollapse: true,
            collapseBooleanAttributes: false,
            removeCommentsFromCDATA: true,
            removeOptionalTags: true
          },
          files: [{
            expand: true,
            cwd: '&lt;%= yeoman.dist %&gt;',
            src: ['*.html', 'views/{,*/}*.html'],
            dest: '&lt;%= yeoman.dist %&gt;'
          }]
        }
      },
  
      // 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: ['&lt;%= yeoman.dist %&gt;/*.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: '&lt;%= yeoman.app %&gt;', // Directorio base
            dest: '&lt;%= yeoman.dist %&gt;', // 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: '&lt;%= yeoman.dist %&gt;/images',
            src: ['generated/*']
          }, {
            //For font-awesome
            expand: true,
            dot: true,
            cwd: 'bower_components/font-awesome',
            src: ['fonts/*.*'],
            dest: '&lt;%= yeoman.dist %&gt;'
          }]
        },
        styles: {
          expand: true,
          cwd: '&lt;%= yeoman.app %&gt;/styles',
          dest: '.tmp/styles/',
          src: ['{,*/}*.css', 'bower_components/**/*/*.css']
        },
        fonts: {
          expand: true,
          flatten: true,
          cwd: '&lt;%= yeoman.app %&gt;',
          dest: '&lt;%= yeoman.dist %&gt;/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'
    ]);
  
  };
  </code></pre>
  
  <p>I'm using compass 1.0.3 and sass 3.4.2.</p>