Search code examples
csssasszurb-foundationcompass-sass

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.

enter image description here

*************** 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;
}

Solution

  • 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