如何自定义 Zurb Foundation 4 SCSS 组件？答案

【问题标题】：How to customise Zurb Foundation 4 SCSS components?如何自定义 Zurb Foundation 4 SCSS 组件？
【发布时间】：2013-09-03 23:33:51
【问题描述】：

我正在使用 Zurb Foundation 4 的 Compass SASS 版本。它有一个文件 _settings.scss，其中包含在整个 Foundation 中使用的变量和 mixin。编辑此文件可帮助您控制任何组件的某些样式。但这还不够。为了有更多的自定义样式，我需要修改更多的 CSS，而不仅仅是 _settings.scss 文件中的变量。

所以，我在 app.scss 文件中注释掉了以下行

@import "foundation";

并取消注释各个组件，例如：

@import "foundation/components/global";
@import "foundation/components/grid";

@import "foundation/components/top-bar";

现在我需要修改顶部栏组件的SCSS 文件。我需要编辑哪个文件，文件在哪里？

【问题讨论】：

标签： css sass zurb-foundation compass-sass

【解决方案1】：

您可以覆盖新样式表中的样式，或者手动导入文件 - 您可以在 Github 上找到它们。

我总是在我的项目中包含来自 Foundation 的文件，因此很容易更改它们！

【讨论】：

【解决方案2】：

根据 Zurb Foundation Docs，您可以单独使用 Foundation 和 Sass，并在其上添加 Compass、Bourbon 或其他任何东西。您可以从 GitHub 下载独立的 Sass 文件并将其保存在 sass 目录中。因此，这些独立的 SCSS 文件的路径将与 Compass 中的组件相同。并且您可以修改foundation/components 目录中的任何SCSS 文件。您只能将要修改的文件保留在该目录中。如果在那里找到一些文件，那么它将被使用。否则，它将使用 Compass 组件中的文件。

【讨论】：

【解决方案3】：

顶栏很容易修改。查看您的 _settings.css 文件。

在 1021 行附近，您会发现：

//
// Top Bar Variables
//

// Background color for the top bar

// $topbar-bg: #111 !default;

// Height and margin

// $topbar-height: 55px;
// $topbar-margin-bottom: emCalc(30px);

// ...etc

只需取消注释您要更改的值，然后放入您要使用的新值。然后你需要用你的新值重建基础 css。您可以使用 sass 执行此操作，或者，如果您使用 Compass，则可以使用 compass watch 命令非常轻松地完成此操作。

【讨论】：

正如我在问题中解释的那样，_settings.css 有助于控制一些样式。我需要控制更多。所以，需要修改_top-bar.scss文件。
您到底想编辑什么。顶部栏（更具体地说是顶部导航栏）非常复杂。在某些复杂的点上，使用自己的版本可能比使用 Foundation 的版本更容易。