我如何在Rails应用程序中使基础全局变量可用于我的所有scss文件

Question

我想知道如何在我的所有scss中使用颜色变量（例如$ light-gray）（我使用的是Foundation 6）。

我以为在我的应用程序顶部使用*= require foundation_and_overrides requirefoundation_and_overrides。scss将使所有scss文件中的所有变量都可用，但出现以下错误Undefined variable: "$light-gray".

谢谢你的帮助。

Answer 1

我不知道这是否是最佳做法。 但是我这样做的方式是，我有另一个名为shared_variables.scss scss文件。

// shared_variables.scss
$light-gray: #ccc;

然后在foundation_and_overrides.scss内部，导入它（如果您要在此文件中使用变量）：

// foundation_and_overrides.scss

// ...
@import 'foundation-functions';
@import 'shared_variables'; // Add this line
// ...

然后将其导入到其他依赖于全局变量的其他.scss文件中；

// posts.scss
@import 'shared_variables'; // Add this line

.posts-container {
  background: $light-gray;
}

Answer 2

基本上，我们不能使用@import全局创建变量。 这是原因：

Sass / Sass将获取您要导入的文件，并将其与要导入的文件合并，以便您可以将单个CSS文件提供给Web浏览器。

检查此以获取更多详细信息

假设您有几个Scss文件_reset.scss和base.scss 。 我们想将_reset.scss导入base.scss 。

_reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

该base.scss将产生base.css是这样的：

base.css

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

因此import工作就像将reset内容替换为base输入reset的位置！