Question

我现在已经使用zurb基础了很长一段时间我正在使用如此处所述的凉亭+罗盘设置 http://foundation.zurb.com/docs/sass.html

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

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

基金会5.4.5 - ＆gt;实际上运行5.4.7

指南针1.0.1

任何帮助都表示赞赏。

enter image description here

***************更新：*****************
事实证明我实际上是在运行5.4.7 我查看_functions.scss每个@Cartucho

看起来补丁就在那里：

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

这是基金会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()的mixin _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用户。在基金会论坛中有很多像this one这样的讨论。

根据official doc，基金会与SASS 3.2合作很好：

直到所有Sass图书馆都能赶上Sass 3.4，基金会才会如此在萨斯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

Answer 2

感谢@Cartucho，我通过审查更新的官方文档指出了正确的方向 http://foundation.zurb.com/docs/sass.html

这是我用更新罗盘来编译基础所做的工作：

1）安装了捆绑包

gem install bundler

2）在临时目录中启动了一个新的基础项目

foundation new throwaway_project

3）将愚蠢的Gemfile复制到我现有项目的根目录。它看起来像

source "https://rubygems.org"

gem "sass", "~> 3.3.0"
gem "compass", "~> 1.0"

4）运行一次捆绑

bundle

5）使用bundler再次运行指南针（如说明书中所示）

bundle exec compass watch

一堆弃用警告，但生成的css现在看起来不错。

zurb foundation - 许多重复的css条目

2 个答案: