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:
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.
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:
