如何在rails应用程序中为我的所有scss文件提供基础全局变量

Question

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

我想在我的应用程序顶部使用*= require foundation_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文件   到网络浏览器。

查看this了解更多详情

我们假设您有几个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内容替换为reset中导入base的位置一样！