Question

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

如果我配置了gem：

只要我通过@import "ZURB-foundation";
但如果我尝试通过取消注释@import "zurb/buttons";来单独加载组件，我会看到错误："Undefined variable: "$default-color" - 但变量和mixin文件在哪里生效？
此外，基础scss文件存在于何处，因此您可以自定义设计而无需使用apps.scss覆盖所有内容？

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

我得到/ zurb /目录不存在的错误（它不存在） - 这似乎与上面的第3点有关 - 当你创建一个新的指南针基础项目时，似乎没有任何基础文件住在项目文件夹中。

如果我然后通过github下载foundation-sass：

所有文件都是sass格式而不是scss
虽然您可以在调用它们时修改指南针mixin，但如何修改基础的样式表文件而不修改其原始文件 - 或者您是否应该编辑其文件？

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

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

非常感谢任何帮助。

干杯

本

Answer 1

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

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

See here in the source comments

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

Answer 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文件是一个非常糟糕的主意，因为您的更改可能会被进一步更新删除。

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

2 个答案: