我按照这里的说明:http://foundation.zurb.com/docs/sass.html
这些建议我安装宝石(没问题),然后安装指南针然后创建一个项目,这是我在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”。也许我错过了一些东西,但这真的很混乱。有人可以澄清我需要什么,我可以删除/忽略吗?
解决方法
Github报价中的项目文件显示了建立F4项目的最新Compass说明。
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项目的手动步骤。我认为你坚持在第4步,所以专注于那一部分。
步骤1:
下载以便于访问这两个档案:
香草香草:
http://foundation.zurb.com/files/foundation-4.1.6.zip
基础硕士:
https://github.com/zurb/foundation/archive/master.zip
光盘放入您的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或:压缩,line_comments = false for Production(上线时)。
步骤3:
>将index.html从Foundation Vanilla复制/移动到您的根www目录中。
>编辑第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。
这种情况自动发生,除了安装了所需的宝石以及STEP 2中的Compass配置文件之外,您不需要执行任何操作。
步骤6:
创建此目录并将这些文件复制/移动到其中:
/ JS /
>从Foundation Vanilla下载这里复制/移动/js/foundation.min.js。
>如果你需要你自己的app.js创建/放置在这里,并链接到最后一个页脚。
/ JS /供应商/
>将/js/vendor/custom.modernizr.js从Foundation Vanilla下载到这里。
>复制/移动/js/vendor/zepto.js和/js/vendor/jquery.js从Foundation Vanilla下载。
之后,当您感觉更舒服时,您可以从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