无法覆盖变量 - 将Zurb-Foundation添加到Spree

Question

我试图在Zurb基金会框架的帮助下重写我们商店的前端，遗憾的是，我遇到了一些问题。

我在我的gemfile中包含了'zurb-foundation' gem，并将以下内容添加到资产/商店目录中的all.js和all.css

资产/样式表/存储/ all.css

*= require foundation
@import 'foundation';

资产/ Javascript角/存储/ all.js

//= require foundation
(document).foundation();

到目前为止，我可以使用zurb文档中描述的类 - 此外，框架中包含的不同项目运行良好（Topbar，Orbit等）

可悲的是我遇到了这个问题，我无法覆盖变量。 我在stylesheets / store目录中创建了一个文件'custom_variables.css.scss'来处理这些文件 - 但如果我在那里覆盖它们，它们似乎没有生效。

Answer 1

不确定为什么这不包含在Rails版本中。您可以添加由Compass自动创建的名为_settings.scss

的文件

您可以从github下载文件：

Github file for settings.scss

并将其放在app/assets/stylesheets

中

然后将以下行添加到foundation_and_overrides.scss

上方的@import 'foundation';

@import'settings';

现在应该是这样的：

// Settings file to override Foundation variables

// You can find the variables for each component at the bottom of their
// doc page. We tried to name them to where they'd make sense just by reading them.
// Go to http://foundation.zurb.com/docs/ to find what you need.

@import 'settings'
@import 'foundation';

现在您可以取消注释您想要更改的内容，而不是尝试覆盖样式。这是默认使用Compass的方式。我认为关键是在调用@import 'foundation';之前更改sass变量。否则，您只需在写完基础的所有css之后更改变量。

使用Foundation 4.0.8，这对我来说效果很好。