Question

我决定使用Sass版本的Foundation4，因为现在几乎不可能有效地编辑CSS。

我按照此处的说明操作：http://foundation.zurb.com/docs/sass.html

这些建议我安装gem（没问题）然后安装指南针然后创建一个项目，我在wwwroot中做了。

到目前为止一切顺利。然后继续建议我“从Github下载文件（抓住scss /和js /目录）并将它们放入项目目录”

现在为什么以自行车上的鱼的名义，指令建议我在命令行上的上一步（罗盘创建-r zurb-foundation - 使用基础）创建一个已经在根目录中的文件夹时执行此操作我的项目的目录 - 虽然命名不同 - 包含类似但不相同的文件？已经有一个“javascripts”文件夹，其中包含“基础”和“供应商”子文件夹，这些文件夹包含大致相同的文件 - 尽管有些文件大小不同。

我错过了什么吗？包含的“index.html”文件引用了“javascripts”文件夹，为什么我要从github中包含“js”？当你刚接触这项技术时，这非常令人困惑！

按照安装说明后，我现在有“foundation.scss”和“app.scss”文件，除了一个（app.scss）之外，似乎大致相同，有很多注释掉了。我打算使用哪一个？

在我看来，指示基本上是过时的。看来我不需要来自github的“js”，但我确实需要“scss”。这个scss文件夹的内容看起来像需要进入项目创建时创建的“sass”文件夹，并且“foundation.scss”文件可以删除，因为“app.scss”是它的副本。

我不知道基础“app.scss”文件希望“@import foundation”的位置，因为在安装/创建项目时没有创建“基础”文件夹。也许我错过了一些东西，但这一切都让人很困惑。有人可以澄清我需要从什么开始以及我可以删除/忽略的内容吗？

Answer 1

安装gem时，会在gem缓存中为您安装所有正确的Foundation文件。 Compass将通过foundation.scss的@import指令将所有F4 SCSS文件提取到您的项目中。

Github回购中的项目文档显示了构建F4项目的最新指南针说明。 https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

听起来您正在将 Standalone 指令混合到Compass指令中。

如果你运行了这个：

[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation

您不需要Github或独立指令。

以下步骤概述了构建F4项目的手动步骤。我认为你坚持 STEP 4 ，所以请关注那个部分。

第1步：

下载以便轻松访问这两个档案：

粉底香草：

http://foundation.zurb.com/files/foundation-4.1.6.zip

基础大师：

https://github.com/zurb/foundation/archive/master.zip

CD到您的www根目录：

第2步：

创建此文件：

<强> /config.rb

require 'zurb-foundation'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true

为制作切换output_style = :compact or :compressed和line_comments = false（上线时）。

第3步：

将{strong> Foundation Vanilla 中的index.html复制/移动到您的根www目录中。
修改line 11并在样式标记中将foundation.css更改为app.css。

第4步：

创建此目录和文件：

<强> / SCSS /

创建app.scss - 这是您的网站/应用样式表，我们将导入Normalize和F4。

将其复制到其中：

// Global Foundation Settings
// @import "settings";

// Comment out this import if you don't want to use normalize
@import "normalize";

// Comment out this import if you are customizing you imports below
@import "foundation";

// Your own SCSS here...

如果您想覆盖某些F4 SaSS变量，则需要_settings.scss文件。现在我将跳过这一步并将其注释掉，直到你对F4更熟悉。

第5步：

创建此目录（此处自动编写的文件）：

<强> / CSS /

app.css - 将由指南针从/scss/app.scss写在这里。标准化，所有F4 CSS都将在其中，加上您添加的任何CSS。

这种情况会自动发生，除了安装了必需的Gems以及 STEP 2 中的Compass配置文件之外，您无需执行任何操作。

第6步：

创建此目录并将这些文件复制/移动到其中：

<强> / JS /

从此处基金会香草下载复制/移动/js/foundation.min.js。
如果您需要自己的app.js创建/将其放置在此处并在页脚中最后链接到它。

<强> / JS /供应商/

将 Foundation Vanilla 下载中的/js/vendor/custom.modernizr.js复制/移动到此处。
从此处基金会香草下载复制/移动/js/vendor/zepto.js和/js/vendor/jquery.js。

稍后，当您感觉更舒服时，您可以从 Foundation Master 中选择单个Foundation JS文件，并将它们作为foundation.min.js连接到较小的lib中。

应该这样做。

在 www repo中查看此文件，因为它显示了正常运行的F4设置： https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html

您还可以在那里找到如何集成 Grunt.js ，以便通过连接和缩小来自动构建SCSS和JS： https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js

Answer 2

没有像@jhauraw那样娴熟，我确实注意到了别的东西。

我通过Compass应用程序安装了FOundation。作为Compass的新手，我也在寻找包含所有各种Foundation SCSS文件的“基础”文件夹。当我查看存在的_settings.scss文件时，似乎所有内容都被注释掉了。我所知道的（仍然是Compass的新手）是“基础”文件存在于Compass中的资源库中。需要时，会在生成CSS文件时导入这些文件。包含所有已注释掉字段的_settings.scss文件是覆盖文件。因此，如果删除特定变量或mixin的注释，它将覆盖Compass库中隐藏的原件。编译后的CSS似乎包含了所需的一切。

SASS和Zurb Foundation - 令人困惑的安装说明

2 个答案: