zurb foundation - many duplicate css entries

问题:

I've been using zurb foundation for quite a while now.
I'm using a bower + compass setup as described here
http://foundation.zurb.com/docs/sass.html

Today while working I noticed that a page was taking a while to load and while attempting to trouble shoot an issue I noticed that there are a many duplicate directives in the generated css file.

I'm sure this is probably me doing something wrong, but I don't know where to start looking and I don't even know what information to provide that might help narrow down the issue.

Foundation 5.4.5 --> actually running 5.4.7

Compass 1.0.1

Any assistance apprecieated.

*************** Update: *****************
So as it turns out I was in fact running 5.4.7 I looked in _functions.scss per @Cartucho

and it looks like the patch is there:

// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components. 
$modules: () !default;
@mixin exports($name) {
  $module_index: index($modules, $name);
  @if (($module_index == null) or ($module_index == false)) {
    $modules: append($modules, $name);
    @content;
  }
}

@KatieK some examples from outputted css at line 90

/* line 386, ../../../../foundation_master/bower_components/foundation/scss/foundation/components/_global.scss */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

at line 2885

/* line 386, ../../../../foundation_master/bower_components/foundation/scss/foundation/components/_global.scss */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

at line 3085

/* line 386, ../../../../foundation_master/bower_components/foundation/scss/foundation/components/_global.scss */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

回答1:

It's a bug of Foundation 5.4.5. Basically the problem started when Sass 3.4 introduced some backwards incompatibilities when handling global variables:

http://sass-lang.com/documentation/file.SASS_CHANGELOG.html

All variable assignments not at the top level of the document are now local by default. If there’s a global variable with the same name, it won’t be overwritten unless the !global flag is used. For example, $var: value !global will assign to $var globally.

But this new syntax is not recognized by libsass (based on Sass 3.2 specification), so Foundation guys released 5.4.5 with a partial patch: https://github.com/zurb/foundation/commit/8b85dc37fab3da156cdfdddfc8919667b98eb155

To resolve this, please update to 5.4.6 or higher. The bug is in the mixin exports() of _functions.scss. Try replacing it with this code (from Foundation 5.4.6):

// _functions.scss
// ...
// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components. 
$modules: () !default;
@mixin exports($name) {
  $module_index: index($modules, $name);
  @if (($module_index == null) or ($module_index == false)) {
    $modules: append($modules, $name);
    @content;
  }
}

Hope it helps!

---

EDIT

Seems that Foundation 5.4.7 still has compatibility issues with SASS 3.4 and SASS 3.2, specially for Compass users. There are a lot of discussion like this one in Foundation Forum.

According to official doc, Foundation works well with SASS 3.2:

Until all Sass library's can catch up to Sass 3.4, Foundation will be on Sass 3.2. This means if you have upgraded to Sass 3.4+ and Compass 1.0+ the commands to compile a Compass project have changed slightly.

I used to compile SASS with Compass but I give up because of those problems. So, my last advice is to uninstall Compass (usually SASS 3.4) and use libsass (based on SASS 3.2). I use the following script for installing libsass in my Ubuntu:

#!/bin/sh

# install_libsass.sh
#
# Script for installing libsass (https://github.com/sass/libsass),
#
# NOTES
#   http://foundation.zurb.com/forum/posts/6803-trouble-creating-f5-project-with-grunt-and-libsass
#   http://mattferderer.com/compile-sass-with-sassc-and-libsass
#


sudo apt-get install git

cd /opt
sudo rm -R -f sassc
sudo rm -R -f libsass
sudo git clone https://github.com/hcatlin/sassc.git
sudo git clone https://github.com/hcatlin/libsass.git

cd /opt/libsass
sudo git submodule update --init --recursive

cd /opt/sassc
## Add the line "export SASS_LIBSASS_PATH=/opt/libsass"
## at the begining of sassc/Makefile
sudo sh -c "echo 'export SASS_LIBSASS_PATH=/opt/libsass' | cat - Makefile > temp && mv temp Makefile"
sudo make

echo "REBOOT!"

Then, reboot and check everything is OK with this command:

/opt/sassc/bin/sassc -h

回答2:

Thanks to @Cartucho, I was pointed in the right direction by reviewing the updated official docs.
http://foundation.zurb.com/docs/sass.html

Here's what I did to update my use of compass to compile foundation:

1) installed bundler

gem install bundler

2) in a temp directory started a new foundation project

foundation new throwaway_project

3) copied the stupid Gemfile to the root of my existing project. it looks like

source "https://rubygems.org"

gem "sass", "~> 3.3.0"
gem "compass", "~> 1.0"

4) ran bundle once

bundle

5) run compass watch again using bundler (as in instructions)

bundle exec compass watch

a bunch of deprecation warnings but generated css looks good now.