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

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,所有正确的基础文件安装为您在创业板上市的缓存.Compass将通过@import指令将所有F4 SCSS文件提取到您的项目中foundation.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步:

• 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指南针写在这里.标准化并且所有F4 CSS都将在其中,加上您添加的任何自己的CSS.

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

第6步:

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

/ JS /

• 复制/移动/js/foundation.min.js从基金会香草在这里下载.

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

/ JS /供应商/

• 复制/移动/js/vendor/custom.modernizr.js从基金会香草下载到这里.

• 复制/移动/js/vendor/zepto.js,/js/vendor/jquery.js从这里下载基金会香草.

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

应该这样做.

在我的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