Zurb - a lot of duplicate css records

Question

I have been using the zurb framework for a long time. I am using bower + compass setup as described here
http://foundation.zurb.com/docs/sass.html

Today, while working, I noticed that it took a while to load the page, and trying to fix the problem, I noticed that there were many duplicate directives in the generated css file.

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

Base 5.4.5 -> 5.4.7 actually works

Compass 1.0.1

Any help was appreciated.

*************** Update: ******************
So, as it turned out, I actually did 5.4.7. I looked in _functions.scss for @Cartucho

and it looks like the patch has:

// 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 of output css on 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; } 

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

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

Answer 1

This is a base error 5.4.5. Mostly the problem arose when Sass 3.4 introduced some backward incompatibilities when processing global variables:

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

All variable assignments not at the top level of the document are now locally by default. If theres is a global variable with the same name, it will not be overwritten unless the global flag is used. For example, $ var: value! global assigns $ var globally.

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

To resolve this issue, upgrade it to 5.4.6 or higher. The error is in mixin exports() from _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 this helps!

---

EDIT

Foundation 5.4.7 seems to still have compatibility issues with SASS 3.4 and SASS 3.2, especially for Compass users. There are many discussions, such as this one in the Foundation forum.

According to an official document , the Fund works well with SASS 3.2:

Until the entire Sass library can catch up with Sass 3.4, the Foundation will be on Sass 3.2. This means that if you upgraded to Sass 3.4+ and Compass 1.0+, the commands for compiling the Compass project have changed a bit.

I used to compile SASS with Compass, but I refuse because of these problems. So my last tip is to remove Compass (usually SASS 3.4) and use libsass (based on SASS 3.2). I use the following script to install 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 if everything is ok with this command:

 /opt/sassc/bin/sassc -h 

Answer 2

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

Here is what I did to update my use of compass to compile the basics:

1) installed package

 gem install bundler 

2) a new fund project was launched in the temp directory

 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 the beam once

 bundle 

5) again start viewing the compass using the bundle (as in the instructions)

 bundle exec compass watch 

a bunch of obsolete warnings, but the generated css now looks good.