SASS-在多个文件中使用变量

您可以这样做：

我有一个名为Utility的文件夹，并且在其中有一个名为_variables.scss的文件

在该文件中，我这样声明变量：

$black: #000;
$white: #fff;

然后我有style.scss文件，在其中我导入所有其他的scss文件，如下所示：

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

然后，在我导入的任何文件中，我都应该能够访问我声明的变量。

只要确保先导入变量文件，然后再使用其他任何文件即可。

这个答案说明了我最终是如何使用此功能以及遇到的其他陷阱的。

我制作了一个主SCSS文件。此文件的开头必须带有下划线才能导入：

// assets/_master.scss 
$accent: #6D87A7;           
$error: #811702;

然后，在所有其他.SCSS文件的标题中，导入母版：

// When importing the master, you leave out the underscore, and it
// will look for a file with the underscore. This prevents the SCSS
// compiler from generating a CSS file from it.
@import "assets/master";

// Then do the rest of my CSS afterwards:
.text { color: $accent; }

重要

除了文件中的变量，函数声明和其他SASS功能外，请勿包含其他任何内容_master.scss。如果包含实际的CSS，它将在导入母版的每个文件中复制此CSS。

如何在全局sass文件中编写一些基于颜色的类，因此我们不需要关心变量在哪里。就像下面这样：

// base.scss 
@import "./_variables.scss";

.background-color{
    background: $bg-color;
}

然后，我们可以background-color在任何文件中使用该类。我的观点是，我不需要导入variable.scss任何文件，只需使用它即可。