Question

我正在使用Compass SASS版本的Zurb Foundation 4.它有一个文件_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文件。我需要编辑哪个文件以及文件在哪里？

Answer 1

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

我总是在我的项目中包含基础文件，因此很容易改变它们！

Answer 2

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

Answer 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命令。

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

3 个答案: