zurb foundation - 许多重复的css条目

Question

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

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

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

基础5.4.5 - >实际运行5.4.7

指南针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来自第90行的输出css的一些例子

/* 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

这是基金会5.4.5的一个错误.基本上,当Sass 3.4在处理全局变量时引入了一些向后兼容性时,问题就出现了:

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

默认情况下,不在文档顶层的所有变量赋值都是本地的.如果存在具有相同名称的全局变量,则除非使用!global标志,否则不会覆盖该变量.例如,$ var:value!global将全局分配给$ var.

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

要解决此问题,请更新至5.4.6或更高版本.这个错误在混合exports()中_functions.scss.尝试用此代码替换它(来自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用户.在基金会论坛上有很多像这样的讨论.

根据官方文件,基金会与SASS 3.2配合得很好:

在所有Sass图书馆都能赶上Sass 3.4之前,基金会将参加Sass 3.2.这意味着如果您已升级到Sass 3.4+和Compass 1.0+,则编译Compass项目的命令会略有改变.

我曾经用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