1

我正在使用 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顶部栏组件的文件。我需要编辑哪个文件，文件在哪里？

4

3 回答 3

1

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

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

于 2013-08-31T09:13:24.863 回答
0

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

于 2013-08-31T09:38:29.350 回答
0

顶栏很容易修改。查看您的_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命令。

于 2013-08-31T11:02:42.907 回答