css - zurb foundation - 许多重复的 css 条目

Question

我使用 zurb foundation 已经有一段时间了。
我正在使用这里描述的 bower + compass 设置
http://foundation.zurb.com/docs/sass.html

今天在工作时我注意到一个页面需要一段时间才能加载，并且在尝试解决问题时我注意到生成的 css 文件中有许多重复的指令。

我确定这可能是我做错了什么，但我不知道从哪里开始寻找，我什至不知道提供哪些信息可能有助于缩小问题范围。

Foundation 5.4.5 --> 实际运行 5.4.7

compass 1.0.1

感谢任何帮助。

*************** 更新:******************
所以事实证明我实际上运行的是 5.4.7我根据@Cartucho 查看了 _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;
  }
}

@KatieK 输出的 css 中的一些示例在第 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;
}

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

第 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

这是 Foundation 5.4.5 的一个错误。基本上，当 Sass 3.4 在处理全局变量时引入了一些向后不兼容时，问题就开始了:

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.

但这种新语法无法被 libsass(基于 Sass 3.2 规范)识别，因此 Foundation 人员发布了带有部分补丁的 5.4.5: https://github.com/zurb/foundation/commit/8b85dc37fab3da156cdfdddfc8919667b98eb155

要解决此问题，请更新到 5.4.6 或更高版本。该错误位于 _functions.scss 的混合 exports() 中。尝试将其替换为以下代码(来自 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;
  }
}

希望对您有所帮助!

---

编辑

似乎 Foundation 5.4.7 仍然存在与 SASS 3.4 和 SASS 3.2 的兼容性问题，特别是对于 Compass 用户。有很多讨论像this one在基金会论坛。

根据 official doc , Foundation 与 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.

我曾经用 Compass 编译 SASS，但因为这些问题我放弃了。所以，我最后的建议是卸载 Compass(通常是 SASS 3.4)并使用 libsass(基于 SASS 3.2)。我使用以下脚本在我的 Ubuntu 中安装 libsass:

#!/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!"

然后，重新启动并使用此命令检查一切是否正常:

/opt/sassc/bin/sassc -h