Wednesday 15 February 2012

sass - zurb foundation - many duplicate css entries -



sass - zurb foundation - many duplicate css entries -

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

today while working noticed page taking while load , while attempting problem shoot issue noticed there many duplicate directives in generated css file.

i'm sure me doing wrong, don't know start looking , don't know info provide might help narrow downwards issue.

foundation 5.4.5 --> running 5.4.7

compass 1.0.1

any assistance apprecieated.

*************** update: ***************** turns out in fact running 5.4.7 looked in _functions.scss per @cartucho

and looks patch there:

// import 1 time // utilize prevent styles beingness loaded multiple times compenents 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 examples outputted css @ 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; }

it's bug of foundation 5.4.5. problem started when sass 3.4 introduced backwards incompatibilities when handling global variables:

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

all variable assignments not @ top level of document local default. if there’s global variable same name, won’t overwritten unless !global flag used. example, $var: value !global assign $var globally.

but new syntax not recognized libsass (based on sass 3.2 specification), foundation guys released 5.4.5 partial patch: https://github.com/zurb/foundation/commit/8b85dc37fab3da156cdfdddfc8919667b98eb155

to resolve this, please update 5.4.6 or higher. bug in mixin exports() of _functions.scss. seek replacing code (from foundation 5.4.6):

// _functions.scss // ... // import 1 time // utilize prevent styles beingness loaded multiple times compenents 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 helps!

edit

seems foundation 5.4.7 still has compatibility issues sass 3.4 , sass 3.2, specially compass users. there lot of give-and-take this one in foundation forum.

according official doc, foundation works sass 3.2:

until sass library's can grab sass 3.4, foundation on sass 3.2. means if have upgraded sass 3.4+ , compass 1.0+ commands compile compass project have changed slightly.

i used compile sass compass give because of problems. so, lastly advice uninstall compass (usually sass 3.4) , utilize libsass (based on sass 3.2). utilize next script installing libsass in ubuntu:

#!/bin/sh # install_libsass.sh # # script 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 together line "export sass_libsass_path=/opt/libsass" ## @ begining of sassc/makefile sudo sh -c "echo 'export sass_libsass_path=/opt/libsass' | cat - makefile > temp && mv temp makefile" sudo create echo "reboot!"

then, reboot , check ok command:

/opt/sassc/bin/sassc -h

css sass zurb-foundation compass-sass

No comments:

Post a Comment