如何在 Ember-cli 项目中自定义 Foundation scss 样式答案

【问题标题】：How to customize Foundation scss styles within Ember-cli project如何在 Ember-cli 项目中自定义 Foundation scss 样式
【发布时间】：2014-08-27 22:27:26
【问题描述】：

我有一个 ember-cli 项目，其中包含了 Foundation css 框架。我应该提一下，我对使用 SCSS 完全陌生，所以请多多包涵！

我的app/styles/app.scss 文件如下所示：

@import 'vendor/foundation/scss/normalize';
@import 'vendor/foundation/scss/foundation';

现在我想覆盖一些样式；我的问题是我在哪里以及如何做到这一点？更改bower_components/foundation 中的代码没有意义，但我不清楚该怎么做。

这样做的正确方法是什么？

非常感谢，

迈克尔

【问题讨论】：

您是否看过 ember-cli-foundation ember 插件。它将为您加载基础 css。然后，您可以将新样式添加到 app.scss 文件中。 github.com/kiwiupover/ember-cli-foundationnpm install ember-cli-foundation --save-dev

标签： ember.js sass zurb-foundation ember-cli

【解决方案1】：

如果您想简单地覆盖颜色等，您可以在导入 Foundation SCSS之前为变量赋值（它们在 Foundation 的文档中进行了解释）。我是这样做的：

app.sass

@import "_variables.scss";
@import "bower_components/foundation/scss/normalize";
@import "bower_components/foundation/scss/foundation";

_variables.scss

$table-bg: transparent;
$table-even-row-bg: transparent;
$table-border-style: none;
$table-head-font-color: inherit;
$table-row-font-color: inherit;
$table-head-padding: rem-calc( 5 );
$table-row-padding: rem-calc( 5 );
// etc

如果您需要更多的自定义，您当然可以定义自己的类以在导入后覆盖 Foundation。您可以使用 SASS mixins 和 import 语句将其现有的 css（和您自己的）导入您自己的定义中：

.full-row {
   @include grid-row(); // brings in a mixin
   // more styles
}

.option-panel {
  @include someclass; // brings in the styles defined for class someclass
  // etc
}

【讨论】：

我认为你应该为此获得一枚奖牌。