Foundation 5 自定义 sass 项目设置答案

【问题标题】：Foundation 5 custom sass project setupFoundation 5 自定义 sass 项目设置
【发布时间】：2016-01-26 16:30:44
【问题描述】：

我有一个项目想使用foundation 5。我已经完成了使用 CLI 创建新基础项目的步骤，但我不喜欢它。文件太多，结构与我想要的不匹配。所以...

我打算只将所需的文件添加到我的项目中，并使用 compass 编译所有 css。

我注意到在 CLI 上创建的项目中有一些让我感到困惑的事情，希望得到一些帮助来解决这些问题。

在 CLI 上创建的项目中有两个 _settings.scss 文件，一个在 bower_components 的基础目录下，一个在 MY_PROJECT\scss 中。我假设由于config.rb 中的add_import_path "bower_components/foundation/scss" 行，哪些文件具有优先权？
为什么MY_PROJECT/stylesheets 里面没有 normalize.css（或foundation.css）？他们怎么不在那里？（在我的自定义设置中，它们正在生成，尽管在stylesheets 的子目录中，而且为我生成的foundation.css 没有应用任何设置更改，所以我猜它不应该被生成）

【问题讨论】：

标签： zurb-foundation compass-sass compass zurb-foundation-5

【解决方案1】：

如果您查看\bower_components\foundation\scss 内部，您会看到文件foundation.scss。该文件导入 Foundation 5“包”中所有附加组件的所有样式表。在您的根 scss 目录中，app.scss 将 SASS 编译为 \stylesheets\app.css。所以而不是这样：

@import "foundation";

取消注释您将使用的各个组件。像这样的：

@import
   //"foundation/components/accordion",
   //"foundation/components/alert-boxes",
   "foundation/components/block-grid",
   //"foundation/components/breadcrumbs",
   //"foundation/components/button-groups",
   //"foundation/components/buttons",
   "foundation/components/clearing",
   "foundation/components/dropdown",
   //"foundation/components/dropdown-buttons",
   //"foundation/components/flex-video",
   "foundation/components/forms",
   "foundation/components/grid",
   //"foundation/components/inline-lists",
   //"foundation/components/joyride",
   //"foundation/components/keystrokes",
   //"foundation/components/labels",
   //"foundation/components/magellan",
   //"foundation/components/orbit",
   //"foundation/components/pagination",
   //"foundation/components/panels",
   //"foundation/components/pricing-tables",
   //"foundation/components/progress-bars",
   "foundation/components/reveal",
   "foundation/components/side-nav",
   //"foundation/components/split-buttons",
   "foundation/components/sub-nav",
   //"foundation/components/switches",
   "foundation/components/tables",
   //"foundation/components/tabs",
   //"foundation/components/thumbs",
   //"foundation/components/tooltips",
   "foundation/components/top-bar",
   "foundation/components/type",
   "foundation/components/offcanvas",
   "foundation/components/visibility";

如果您想简化文件结构，我建议您从 \bower_components\foundation\scss\foundation\components 目录中删除您不会使用的所有 scss 文件。与js 目录相同。您实际上不需要修改bower_components 目录中的任何内容即可使一切正常工作。不完全确定为什么它都包含在 bower_components 中，但我想这与以后能够在未来的版本中更新核心组件有关。

其他人可能会给出更有根据的答案。

附言- 确保在您的 CLI 中compass watch 以查看对您的 SASS 文件所做的任何更改。

【讨论】：