使用 SASS，如何从基本文件中定义的部分文件中访问变量？

Question

我是 SASS 新手，有一个问题，也许我理解不正确。

我有我的基本文件 (global.scss)，然后是几个部分文件。我目前正在做一个项目，我想定义一些自定义颜色以供整个使用（例如，我希望能够将 $color-navy 定义为'#162a3e'）。如何设置这些变量并在我的部分文件和基本文件中访问它们？

我真的希望这是有道理的，如果需要，我会尝试澄清更多。

Answer 1

首先你创建一个文件variables.scss，内容如下

$navy: #162a3e;

接下来，您只需在每个部分（以及您的全局）的开头包含此文件，如下所示：

// Import this in any partial and in your global.scss
@import "variables";

// you have access to $navy ! yay
.saucy{
   color: $navy;
}

从技术上讲，当且仅当您只是编译 global.scss（而不是将部分作为单独的样式表）时，您只需将其导入 global.scss 就可以逃脱，但这是一个更大的话题。每次只导入variables.scss 并没有什么坏处。