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

Question

我有一个ember-cli项目，其中包含了Foundation css框架。我应该提一下，我使用SCSS是全新的，所以请耐心等待我！

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

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

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

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

非常感谢，

迈克尔

Answer 1

如果您想简单地覆盖颜色等，您可以在导入Foundation SCSS之前为变量指定值（它们在Foundation＆＃39文档中解释）。我这样做：

<强> 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
}