为什么我在这个SASS文件中得到一个未定义的Foundation变量错误?

I have a Rails 4 app, using the foundation-rails v5.2.1.0 gem, and one custom SCSS file for my application layout. When I use a variable from the foundation_and_overrides.scss file, I get the following error:

我有一个Rails 4应用程序，使用的是basic - Rails v5.2.1.0 gem，以及一个用于应用程序布局的定制SCSS文件。当我使用foundation_and_overrides中的变量时。scss文件，我得到以下错误:

Undefined variable: "$header-font-family"

I've included relevant code below. I can post more if needed. Anyone know what's going on here?

我在下面包含了相关的代码。如果需要的话，我可以发更多的邮件。有人知道这是怎么回事吗?

From application.css:

从application.css:

*
 *= require foundation_and_overrides
 *= require_self
 *= require_tree .
 */

From foundation_and_overrides.scss:

从foundation_and_overrides.scss:

// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;

From custom.css.scss:

从custom.css.scss:

$include-html-global-classes: false;
@import "foundation/components/global";
. 
. 
. 
.footer {
  background-color: black;
  color: white;
  height: 100px;
  font-family: $header-font-family;
}

3 个解决方案

#1

You are getting the error because foundation_and_overrides.scss is executing after custom.css.scss. Best way to do this is to define your variables in a partial and import it in your main stylesheet after foundation.

您会得到错误，因为foundation_and_overrides。scss是在custom.css.scss之后执行的。最好的方法是在一个部分中定义变量，然后在主样式表中导入它。

First change the file name from

首先更改文件名

foundation_and_overrides.scss to _foundation_and_overrides.scss

foundation_and_overrides。scss,_foundation_and_overrides.scss

and then import it in custom.css.scss file after foundation with

然后导入到custom.css中。scss文件后基础与

@import 'foundation_and_overrides';

Update

Rename your application.css to application.css.scss and custom.css.scss to custom.scss

重命名您的应用程序。css application.css。scss custom.css。scss,custom.scss

In your application.css.scss remove *= require_tree .

在你application.css。删除*= require_tree。

And then import your main stylesheet with

然后导入主样式表

@import 'custom'

I hope this helps

我希望这有助于

#2

The cleanest way is to add the line

最干净的方法是添加线条

@import "custom";

to your file foundation_and_overrides.scss before the line

你的文件foundation_and_overrides。scss线前

@import "foundation";

There's no need to remove *= require_tree . from application.css.scss as stated in the accepted answer. There's also no need to add require foundation_and_overrides to application.css if you leave require_tree . in there.

不需要删除*= require_tree。从application.css。如所接受的答案所述。也不需要向应用程序添加require foundation_and_overrides。如果你留下了require_tree的话。在那里。

#3

According to the Rails Docs:

根据Rails文档:

If you want to use multiple Sass files, you should generally use the Sass >@import rule instead of these Sprockets directives. When using Sprockets >directives, Sass files exist within their own scope, making variables or >mixins only available within the document they were defined in.

如果您想使用多个Sass文件，通常应该使用Sass >@import规则，而不是这些链轮指令。当使用spro佝偻病>指令时，Sass文件存在于它们自己的范围内，使变量或>mixin只能在它们定义的文档中可用。

So in this case the order of the directives (the lines in application.css that start with *=) doesn't matter because each of those files lives in its own scope and you can't access their variables from another scss file. That's why you want to either @import foundation_and_overrides and then custom, or @import your custom stylesheet into foundation_and_overrides.

在这种情况下，指令的顺序(应用中的行)以*=开头的css并不重要，因为每个文件都位于自己的范围内，您无法从另一个scss文件访问它们的变量。这就是为什么您想要@import foundation_and_overrides，然后自定义，或者将您的自定义样式表@import到foundation_and_overrides。