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

Question

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

我按照这里的说明进行操作：http://foundation.zurb.com/docs/sass.html

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

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

现在为什么以自行车上一条鱼的名义，当命令行上的上一步（compass create -r zurb-foundation --usingfoundation）在根目录中创建一个文件夹时，说明会建议我这样做我的项目的目录 - 尽管名称不同 - 包含相似但不相同的文件？已经有一个“javascripts”文件夹，其中包含“foundation”和“vendor”子文件夹，其中包含大部分相同的文件——尽管有些文件的大小不同。

我错过了什么吗？包含的“index.html”文件引用了“javascripts”文件夹，那么为什么我要包含来自 github 的“js”？当您不熟悉这项技术时，这会非常令人困惑！

按照安装说明进行操作后，我现在有了“foundation.scss”和“app.scss”文件，除了其中一个（app.scss）有很多注释之外，它们似乎基本相同。我打算使用哪一个？

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

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

Answer 1

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

Github 存储库中的项目文档显示了用于构建 F4 项目的最新 Compass 说明。 https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

听起来您正在将 独立 指令混入 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 项目的手动步骤。我认为您被困在第 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 步：

• 从 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 - Compass 从/scss/app.scss 写到这里。规范化，所有 F4 CSS 都将包含在其中，以及您添加的任何您自己的 CSS。

这会自动发生，除了安装所需的 gems 和 STEP 2 中的 Compass 配置文件外，您无需执行任何操作。

第 6 步：

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

/js/

• 从 Foundation Vanilla 复制/移动 /js/foundation.min.js，在此处下载。

• 如果您需要自己的app.js，请在此处创建/放置它并在您的页脚中最后链接到它。

/js/vendor/

• 从Foundation Vanilla复制/移动/js/vendor/custom.modernizr.js到此处下载。

• 从Foundation Vanilla复制/移动/js/vendor/zepto.js和/js/vendor/jquery.js，在此处下载。

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

应该可以的。

在我的 www 存储库中查看此文件，因为它显示了一个有效的 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 文件的“foundation”文件夹。当我查看存在的 _settings.scss 文件时，似乎所有内容都被注释掉了。我所知道的（仍然是 Compass 的新手）是“基础”文件位于 Compass 内的资源库中。需要时，这些文件会在生成 CSS 文件时导入。包含所有注释掉的字段的 _settings.scss 文件是一个覆盖文件。因此，如果您删除特定变量或 mixin 的 cmets，它将覆盖隐藏在 Compass 库中的原始文件。编译后的 CSS 似乎包含了所有需要的东西。