css - 如何使用@use跨多个页面使用SASS $变量？

Question

我正在尝试使用在另一个部分内部的一个部分上声明的变量，这两个部分都将使用@use加载到main.scss文件中，然后将其编译为css。

这是设置:

样式.scss

@use './global';
@use './header';

_global.scss

$black: #262626;

_header.scss

header {
  color: $black
}

当我运行尝试编译 style.css 时，我收到此错误:

C:\xampp\htdocs\Site\styles>sass style.scss:style.css
Error: Undefined variable.
  ╷
3 │   color: $black;
  │          ^^^^^^
  ╵
  _header.scss 3:10  @use
  style.scss 2:1     root stylesheet

如果我在主 style.scss 中使用 @import 而不是 @use 效果很好，但是 Sass 的开发人员 advise not to use @import因为它最终会被弃用。

他们说使用 @use instead ，并且@use 比@import 有许多优点，其中之一是@use 的所有实例可以同时加载。我认为这是导致问题的原因，因为 _global.scss 不会在依赖于 _global.scss 中定义的 $black 的页面之前加载，因此这些页面在没有定义 $black 的情况下加载。

有任何想法吗？

Answer 1

来自 Sass Lang documentation for @use :

Members (variables, functions, and mixins) loaded with @use are only visible in the stylesheet that loads them

按照 import 的思路思考在 JavaScript 中而不是使用 Sass 的 @import 的传统全局范围句法。

我认为您可能会尝试执行以下操作:

全局.scss

$black: #000;

header.scss

@use "global";

.header {
  color: global.$black;
}

按钮.scss

@use "global";

.button {
  color: global.$black;
}

索引.scss

@use './button';
@use './header';

这可能比您习惯使用 Sass 的方式更加冗长/繁琐，但从长远来看，它肯定会带来巨大的好处 - 特别是如果您是框架或库作者，或者甚至在使用现有的框架或库时使用您的自己的修改在上面。

许多开发人员(包括我自己)必须处理的 Sass 的一大痛点是在根范围内声明的变量，事实上，所有 Sass 函数都是全局可用的。虽然这有时很方便，但在集成外部编写的库或在具有许多分布式团队的大公司工作时也会导致大量冲突。

例如:如果我使用 Bootstrap 作为我网站样式的基础，并且我加载了一个定义自己的附加库 gradient-bg mixin(也在 TWBS 中定义)，哪个 mixin 是正确的使用？加载顺序对此有影响，您可能看不到任何问题，但您也可能会看到预期输出存在巨大差异，现在需要您深入研究这些库以查看发生了什么。
@use规则通过确保模块成员(变量、函数和混入)只能在加载它们的样式表中访问来解决这个问题。它还有一个额外的好处是允许您进一步简化成员名称 - 因为它们的范围是命名空间(模块 URL 的最后一个组件)，您可以继续定义 $padding或 @mixin flex {} .

组织

最终，这可以帮助您在逻辑上将自己的代码组织成一个结构，从而更容易地维护您的代码(对您的同事和您自己一样)。明确代码的作用并没有错，尤其是当您计划将来进行更新时，您希望它可靠且可预测。

就个人而言，我非常喜欢与以下内容不同的结构:

styles
|-- global
|    |-- functions.scss
|    |-- spacing.scss
|    |-- typography.scss
|    |-- ...etc...
|-- component
|    |-- button.scss
|    |-- header.scss
|    |-- ...etc...

在这种情况下，您的代码将类似于:

按钮.scss

@use "global/spacing.scss";
@use "global/typography.scss";

.button {
  font-size: typography.$standard;
  padding: spacing.$standard;
}

全局命名空间

当然，这完全取决于个人喜好，我知道有些人可能不喜欢新的命名空间。这可以在一定程度上减轻，或完全忽略。

与 @use
使用新的 Sass 模块系统时，使用 @use 时不能将元素放在全局命名空间中.但是，您可以使用 @use "path/to/file" as *; 加载没有命名空间的模块。句法。这将允许您直接访问成员而不需要 <namespace>.<member>句法。

与 @import
如果这仍然不能满足您的需求，您当然可以继续使用 @import可预见的 future 的规则。团队打算支持 @import直到 some time around October 2022 .此时，您始终可以将您的 Sass 版本固定到支持 @import 的最新版本。 .