Zurb Foundation - Many Duplicate CSS Entries

zurb foundation - many duplicate css entries

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

Codekit throwing up error with zurb-foundation 3 installed

Seems like I fixed it by pointing the Compass compiler to the one found in "usr/bin" rather than CodeKit's external compiler. Saw lots of people talking about doing the same thing with the SASS compiler. Still not sure why I had to do this!

Zurb foundation 6 , what-input.min.js file functionality

You don't need the .map file which is used to map a minified file back to the original. It is available for download from jquery's site. Source maps are can be ignored in inspector settings which makes sense when you don't plan on debugging minified javascript files

It is unrelated to the source map file 404 but what-input.min.js is a JS library "to watch for mouse, keyboard and touch events"

They have a github page with more documentation: https://github.com/ten1seven/what-input

and a demo:
https://ten1seven.github.io/what-input/
"Tab, click or tap the links and form controls to see how What Input allows them to be styled differently"

attr() in my scss files?

attr() is a CSS expression that can be used to retrieve various attributes of the selected element. More info available on the MDN docs.

---

Related Topics