css - Zurb 基金会 : compile Sass with my own overrides (e. g。始终设置表格宽度 100%)

Question

不是设计师，所以 Sass 对我来说真的很新。我正在努力定制 Zurb 的基础以适应我自己的口味，但我对定制简单变量之外的东西感到困惑(我在 _settings.scss partial 中配置)。

所以规则是:我不允许修改除我自己的 _custom.scss 部分和 _settings.scss 部分之外的任何其他文件。因此，举个例子，我不喜欢表格不像 Twitter Bootstrap 那样拉伸(stretch)到 100% 宽度，而且 _settings.scss 部分中没有变量，我将如何自定义它而不是修改 _tables.scss？是否可以扩展表 mixin 以合并它？

Answer 1

您有多种选择。

要使用 Foundation，您应该考虑操作“app.scss”文件。 我将创建一个名为 _table.scss 的新文件(不在 Foundation 文件夹中)，内容如下:

 table
 {
     width: 100%;
 }

然后到app.scss中添加

@import "table";

Compass 现在可以将您的定义合并到一个 css 文件中。

或者您创建第二个 CSS 文件，在 app.css 之后加载。

<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" href="stylesheets/table.css">

但这对您的性能和可维护性相当不利。

如果您是 scss 新手，您应该知道文件名前面的下划线用于定义 Partials ( http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials )。如果您创建一个名称前没有下划线的新 scss 文件，compass 将为该 scss 文件创建一个新的 .css 文件。

扩展@mixin 表 的另一种方法是简单地包含它:

@import
    "foundation/components/tables";

table {
    @include table();
    width: 100%;
}