使用指南针配置zurb foundation-sass - 如何让它工作并在项目中使用它?

时间:2012-04-21 04:42:30

标签: sass compass-sass zurb-foundation

我是sass和zurb基础的新手(我过去曾使用过bootstrap / less代码套件)并且一直在尝试使用sass版本foundation-sass但是无法成功配置它 - 或者通过命令行使用zurb的gem或使用codekit。

如果我配置了gem:

  1. 只要我通过@import "ZURB-foundation";

  2. 加载所有基础组件,基础就可以正常工作
  3. 但如果我尝试通过取消注释@import "zurb/buttons";来单独加载组件,我会看到错误:"Undefined variable: "$default-color" - 但变量和mixin文件在哪里生效?

  4. 此外,基础scss文件存在于何处,因此您可以自定义设计而无需使用apps.scss覆盖所有内容?

  5. 如果我采取其他途径并尝试使用mac应用程序代码包:

    1. 我得到/ zurb /目录不存在的错误(它不存在) - 这似乎与上面的第3点有关 - 当你创建一个新的指南针基础项目时,似乎没有任何基础文件住在项目文件夹中。
    2. 如果我然后通过github下载foundation-sass:

      1. 所有文件都是sass格式而不是scss

      2. 虽然您可以在调用它们时修改指南针mixin,但如何修改基础的样式表文件而不修改其原始文件 - 或者您是否应该编辑其文件?

      3. 我没有找到任何关于如何将所有东西放在一起的信息,所以希望有人知道。

        我没有将这个用于红宝石项目btw - 只是试图将其设置为纯粹的前端工作。

        非常感谢任何帮助。

        干杯

2 个答案:

答案 0 :(得分:3)

对于Zurb Foundation 4,它就像首先导入“/ foundation / foundation-global”文件一样简单

@import 'foundation/foundation-global';
@import 'foundation/components/type';
// etc

See here in the source comments

重要的是要注意“基础/全球”与“基础 - 全球”不同。后者只是满足基本的依赖关系,而前者提供了一些最小的基本样式。

答案 1 :(得分:2)

我希望你现在已经解决了这个问题。如果没有,这是宝石的解决方案。

从基础2.2.1开始,foundation.sass中通过注释行找到的建议导入顺序有点不对。 shared/*中定义了许多颜色或混合色,如果您在加载buttons/*之前加载_ZURB-foundation.sass,您最终会被罗盘侮辱。

另一方面,部分@import "ZURB-foundation"(由@import zurb/shared @import zurb/globals @import zurb/typography @import zurb/grid @import zurb/buttons @import zurb/ui @import zurb/forms @import zurb/orbit @import zurb/reveal @import zurb/mobile 导入)以正确的顺序加载部分内容,解释了为什么在单独加载组件时只会出错。

尝试此顺序(SASS语法,为SCSS添加引号和分号):

gem which ZURB-foundation

您可以使用{{1}}找出存储gem的目录。直接自定义Foundation文件是一个非常糟糕的主意,因为您的更改可能会被进一步更新删除。