如何使用@use在多个页面上使用SASS $ variable? [英] How to use a SASS $variable across multiple pages using @use?

问题描述

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

I am trying to use a variable that was declared on one partial inside of another another partial, both of which will be loaded into the main.scss file using @use, which will then be compiled into css.

这是设置:

style.scss

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

_global.scss

$black: #262626;

_header.scss

header {
  color: $black
}

当我尝试编译style.css时，出现此错误:

When I run try to compile style.css, I get this error:

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的开发人员

It works fine if I use @import instead of @use in my main style.scss, but the developers of Sass advise not to use @import because it is going to be deprecated eventually.

他们说使用 @use代替，@use比@import具有许多优点，其中之一是@use的所有实例都可以同时加载.我认为这是造成此问题的原因，因为_global.scss不会在依赖_global.scss中定义的$ black的页面之前加载，因此那些页面未定义$ black即可加载.

They say to use @use instead, and that @use has many advantages over @import, one of which being that all instances of @use can be loaded at the same time. I think this is what's causing the issue, since _global.scss doesn't get to load before the pages which rely on $black defined in _global.scss, so those pages load without $black defined.

有什么想法吗?

推荐答案

来自 Sass Lang @use 的文档:

From the Sass Lang documentation for @use:

使用@use加载的成员(变量，函数和混合)仅在加载它们的样式表中可见

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

使用JavaScript中的 import 思路，而不是使用Sass的 @import 语法的传统全局范围.

Think along the lines of import in JavaScript rather than the traditional global scope of using Sass's @import syntax.

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

I think you may attempting to do something like the following:

global.scss

$black: #000;

header.scss

@use "global";

.header {
  color: global.$black;
}

button.scss

@use "global";

.button {
  color: global.$black;
}

index.scss

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

---

这可能比您传统上使用Sass时要冗长/繁琐，但从长远来看，它无疑具有巨大的好处-特别是如果您是框架或库作者，甚至是使用现有的库一个，上面有您自己的修改.

---

This might be a bit more verbose/cumbersome than what you're traditionally accustomed to with Sass, but it certainly has tremendous benefits in the long run - especially if you're a framework or library author, or even consuming an existing one with your own modifications on top.

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

A big pain point with Sass that many developers (myself included) have had to deal with is variables declared at root scope and, indeed, all Sass functions are globally available. While this is convenient at times, it also leads to a large number of collisions when integrating externally-authored libraries or working in larger companies with many distributed teams.

例如:如果我使用Bootstrap作为网站样式的基础，并且加载了定义其自己的 gradient-bg mixin(也在TWBS中定义)的其他库，则该库mixin是正确使用的一种吗?加载顺序对此有影响，您可能看不到任何问题，但是您可能还会看到预期输出中的巨大差异，这现在需要您深入研究这些库以了解正在发生的情况.

For example: if I'm using Bootstrap as the basis of my website's style, and I load in an additional library that defines its own gradient-bg mixin (also defined in TWBS), which mixin is the correct one to use? Load order has an impact on this, and you may not see any issues, but you may also see huge discrepancies in your expected output which now requires you to dig deep into those libraries to see what's happening.

@use 规则通过确保仅在加载它们的样式表内部访问模块成员(变量，函数和混合)来解决此问题.它还具有允许您进一步简化成员名称的另一个好处-由于它们的作用域是命名空间(模块URL的最后一个组成部分)，因此您可以继续定义 $ padding 或 @mixin flex {} .

The @use rule solves this by ensuring that module members (variables, functions, and mixins) are only accessible inside the stylesheets that load them. It also has an added benefit of allowing you to further simplify member names - since they're scoped to a namespace (the last component of the module’s URL) you can go ahead and just define $padding or @mixin flex {}.

最终，这可以帮助您在逻辑上将自己的代码组织到一个结构中，从而可以更轻松地维护代码(对于您的同事以及您自己).明确说明代码的功能并没有什么错，特别是 ，因为您希望在将来计划进行更新时，代码是可靠且可预测的.

Ultimately, this can help you to logically organise your own code into a structure that makes it easier to maintain your code going forward (for your colleagues as much as yourself). There's nothing wrong with being explicit in what your code does, especially since you want it to be reliable and predictable when you plan on making updates in the future.

我个人非常喜欢与以下结构相似的结构:

Personally, I'm quite fond of a structure not dissimilar to:

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

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

And in a situation like this, your code would look something like:

button.scss

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

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

全局命名空间

当然，这全都取决于个人喜好，我了解有些人可能不是新命名空间的拥护者.这可以有所缓解，也可以完全忽略.

Global namespacing

Of course, it all comes down to personal preference and I understand that some people may not be fans of the new namespacing. This can be mitigated somewhat, or ignored entirely.

使用新的Sass模块系统时，使用 @use 时不能将项目放在全局名称空间中.但是，您可以使用 @use"path/to/file"作为*; 语法来加载不带名称空间的模块.这将允许您直接访问成员，而无需< namespace>.< member> 语法.

When using the new Sass module system, you can't put items in the global namespace when using @use. You can, however, load a module without a namespace by using the @use "path/to/file" as *; syntax. This would allow you to directly access members without needing the <namespace>.<member> syntax.

如果此 still 不能满足您的需求，您当然可以在可预见的将来继续使用 @import 规则.该团队打算一直支持 @import ，直到

If this still doesn't suit your needs, you can of course continue to use the @import rule for the foreseeable future. The team intend to support @import up until some time around October 2022. At this point, you can always pin your version of Sass to the last version that supports @import.

这篇关于如何使用@use在多个页面上使用SASS $ variable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！