18

我决定使用 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”文件夹。也许我错过了一些东西，但这一切都非常令人困惑。有人可以澄清我需要从什么开始以及我可以删除/忽略什么吗？

4

2 回答 2

11

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

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

听起来您正在将独立指令混合到指南针指令中。

如果你运行了这个：

[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 步：

  • index.html从Foundation Vanilla复制/移动到您的根 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- 将由Compass写到这里。标准化，所有 F4 CSS 都将在其中，加上您添加的任何您自己的 CSS。

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

第 6 步：

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

/js/

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

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

/js/供应商/

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

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

稍后，当您感觉更舒服时，您可以从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

于 2013-05-27T17:53:38.283 回答
1

不像@jhauraw 那样熟练，我确实注意到了其他一些事情。

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

于 2013-08-22T21:18:30.423 回答