使用 SASS 设置 Foundation 5 项目

Posted 2023-03-06

【中文标题】使用 SASS 设置 Foundation 5 项目

【英文标题】：Foundation 5 project setup with SASS

【发布时间】：2013-12-12 08:33:24

【问题描述】：

我对 Compass 和 SASS 的整个世界都很陌生，所以我可能在这里遗漏了一些基本的东西。我遇到了 Foundation 5 的结构问题。

如何让这一切在现有 (git) 项目中整齐地工作？ 当我运行foundation new myproject 时，它会将基础知识克隆到“myproject”中：依赖项的 bower_components/ 文件夹、根目录中的 config.rb、“scss”文件夹，我可以在其中修改带有 compass watch 运行的 SASS 文件生成我的 CSS 文件的背景，以及一个示例 index.html 文件。就其本身而言，我想我明白这一切是如何运作的。

我有一个现有项目，我打算在其中使用 Foundation 5。我的第一反应是尝试在我的项目的根目录中“初始化”Foundation：foundation new . 由于它使用的是 git，它当然会抱怨目录不是空的。很公平，所以我把它作为我的 public_html 中的一个子文件夹：foundation new foundation。我将 config.rb 放在项目的根目录中并更新了路径，因此我可以从根目录运行 compass watch。所有这些工作都非常顺利，我玩弄了 scss 文件并观察了我的 css 文件相应地更新。然后我提交了结果并将其从不同的位置拉出来。 'foundation'，作为回购中的回购，并没有与其他一切一起承诺。里面的大部分东西都无关紧要 - foundation new whatever 再次加载它，并且 .gitignoring /bower_components 是明智的。但是我确实需要“scss”目录中的自定义代码。我尝试以不同的方式设置我的项目，将“scss”目录放在 bower 目录之外，并将其设置为 config.rb 中的 sass_dir。 该设置对我来说很有意义，但我无法让它工作：运行compass watch 失败：

     File to import not found or unreadable: foundation.

我现在的 config.rb：

    http_path = "/"
    css_dir = "public_html/assets/css"
    sass_dir = "foundation/scss"
    images_dir = "public_html/assets/img"
    javascripts_dir = "public_html/assets/js"

我如何明确告诉它基础在哪里？我尝试在 config.rb 中使用“add_import_path”，但效果不大。

我觉得我在这里遗漏了一些基本的东西，或者我想多了。由于 Foundation 5 刚出炉，谷歌并没有多大帮助。有人可以推动我朝着正确的方向前进吗？

谢谢！

【参考方案1】：

接受的答案原来是解决方案的一部分。它起作用了，再次查看 config.rb，我意识到告诉 Compass 在哪里寻找 Foundation 的正确方法。哦。

我现在的结构如下：

config.rb
public_html/
--assets/
----scss/
----css/
----foundation/
------bower_components/
--------foundation/ 
----------scss/ # this is the dir that needed to be imported from config.rb

Config.rb：

add_import_path "public_html/assets/foundation/bower_components/foundation/scss" # *magic*
http_path = "/"
css_dir = "public_html/assets/css"
sass_dir = "public_html/assets/scss"
images_dir = "public_html/assets/img"
javascripts_dir = "public_html/assets/foundation/js"

如您所见，这种方式与我希望得到的完全一样：public_html/assets/foundation 中的 Foundation 的东西 - 除了不时运行 bower update 外，不需要触及该目录 - 并且我的自定义 scss 位于 public_html/assets/scss。

感谢您给予我急需的推动！

【讨论】：

太棒了，Foundation 5 也太棒了，祝一切顺利

我遇到了同样的错误并且项目设置略有不同。你能解释一下你的自定义 scss 文件在哪里吗？那么标准下载中没有的 img 文件夹呢？

【参考方案2】：

我遇到了类似的问题，我最终选择了downloading foundation-compass-template，而不是使用基础命令行

解压到我项目的根目录，然后

bower install

这是随之而来的config.rb：

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

我知道这不是一个直接的答案，但希望这个项目能给你一个方向

希望对你有帮助