zurb foundation - 许多重复的css条目 [英] zurb foundation - many duplicate css entries

问题描述

我一直在使用zurb foundation一段时间。

我使用的是bower +指南针设置，如下所示

所有不在文档顶层的变量赋值现在默认为
local。如果有一个具有相同名称的全局变量，它
将不会被覆盖，除非使用！global标志。例如，
$ var：value！global将全局分配给$ var。

通过libsass（基于Sass 3.2规范），所以基金会家伙发布5.4.5与部分补丁：
https://github.com/zurb/foundation/commit/8b85dc37fab3da156cdfdddfc8919667b98eb155

要解决此问题，请更新至5.4.6或更高版本。该错误位于 _functions.scss 的mixin exports（）中。尝试使用此代码（从Foundation 5.4.6）替换它：

  // _functions.scss 
 //。 .. 
 // IMPORT ONCE 
 //我们使用它来防止对依赖其他组件的组件多次加载样式。 
 $ modules：（）！default; 
 @mixin exports（$ name）{
 $ module_index：index（$ modules，$ name）; 
 @if（（$ module_index == null）或（$ module_index == false））{
 $ modules：append（$ modules，$ name）; 
 @content; 
} 
} 
  

希望它有帮助！

---

EDIT

兼容性问题与SASS 3.4和SASS 3.2，特别为Compass用户。有很多讨论，像这一个在基金会论坛。

根据官方文档 ，基金会在SASS 3.2中运行良好：

直到所有Sass库都可以追赶到Sass 3.4，Foundation才会成为$ s $ b 3.2。这意味着如果您已升级到Sass 3.4+和Compass
1.0+，那么编译Compass项目的命令会稍有变化。

我用来编译SASS与Compass，但我放弃了，因为这些问题。所以，我最后的建议是卸载Compass（通常SASS 3.4）和使用libsass（基于SASS 3.2）。我使用以下脚本在我的Ubuntu中安装libsass：

 ＃！/ bin / sh 
 
 ＃install_libsass.sh 
＃
＃用于安装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-和-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 
 ##添加export SASS_LIBSASS_PATH = / opt / libsass
 ##在sassc / Makefile开头
 sudo sh -cecho'export SASS_LIBSASS_PATH = / opt / libsass'| cat  -  Makefile> temp& mv temp Makefile
 sudo make 
 
 echoREBOOT！然后，使用此命令重新启动并检查一切是否正确：
 
 
 
 
 
 
 
 $ b 
  / opt / sassc / bin / sassc -h 
  
 
I've been using zurb foundation for quite a while now.

I'm using a bower + compass setup as described here

http://foundation.zurb.com/docs/sass.html

Today while working I noticed that a page was taking a while to load and while attempting to trouble shoot an issue I noticed that there are a many duplicate directives in the generated css file.

I'm sure this is probably me doing something wrong, but I don't know where to start looking and I don't even know what information to provide that might help narrow down the issue.  

Foundation 5.4.5 --> actually running 5.4.7

Compass 1.0.1

Any assistance apprecieated.



*************** Update: *****************

So as it turns out I was in fact running 5.4.7
I looked in _functions.scss per @Cartucho

and it looks like the patch is there:
// 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 some examples from outputted css
at 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 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


                        
这篇关于zurb foundation  - 许多重复的css条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！