ruby-on-rails - 我可以在 application.css 中使用基金会 scss 中定义的变量吗

Question

在我的 rails 应用程序的资产application.css中，我有以下行

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

ul#mainmenu li {
    background-color: $mainColor;
}

其中包括foundation_and_overrides.scss我定义以下变量的文件

$mainColor: #eba10e;

但是当我现在尝试直接在我的application.css文件中使用这个变量时，它没有被翻译成#eba10e，所以我在生成的 css 文件中得到这样的行：

background-color: $mainColor;

所以我的问题是，如何在 application.css 文件中使用该变量？

Answer 1

不，纯 CSS 不支持变量。

但它会起作用，如果你把它重命名为application.scss. 之后，它将使用 Sass 进行编译。CSS 始终是有效的 SCSS，因此这将毫无问题地工作。

此外，您必须使用@import语句而不是require，因此其他文件将以“SASS 方式”导入。