SASS - 跨多个文件使用变量

Question

我想保留一个中央 .scss 文件来存储项目的所有 SASS 变量定义。

 // _master.scss

$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...

由于其性质，该项目将有大量的 CSS 文件。在一个位置声明所有项目范围的样式变量很重要。

有没有办法在 SCSS 中做到这一点？

原文由 dthree 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题是很久以前提出的，所以我想我会发布一个更新的答案。

您现在应该 避免 使用 @import 。取自文档：

Sass 将在接下来的几年中逐步淘汰它，并最终将其从语言中完全删除。更喜欢@use 规则。

可以在此处找到完整的原因列表

您现在应该使用 @use 如下所示：

_variables.scss

 $text-colour: #262626;

_otherFile.scss

 @use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension

body {
  // namespace.$variable-name
  // namespace is just the last component of its URL without a file extension
  color: variables.$text-colour;
}

您还可以为命名空间创建别名：

_otherFile.scss

 @use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

编辑 正如@und3rdg 在撰写本文时（2020 年 11 月）所指出的那样， @use 目前仅适用于 Dart Sass， 不适 用于 LibSass（现已弃用）或 Ruby Sass。有关最新兼容性，请参阅 https://sass-lang.com/documentation/at-rules/use

原文由 whiscode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以这样做：

我有一个名为 utilities 的文件夹，里面有一个名为 _variables.scss 的文件

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

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

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

 // Utilities
@import "utilities/variables";

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

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

只需确保先导入变量文件，然后再导入您想要在其中使用的任何其他文件。

原文由 Joel 发布，翻译遵循 CC BY-SA 3.0 许可协议