Sass 的@use 特性

Question

首先，我希望有人能真正理解这个漫无边际的问题，因为我什至很难以一种连贯的方式说出我的意思，但这里是：

我不知道为什么我费了这么大的力气来解决这个问题，但是我已经使用 @import 和 SCSS 有一段时间了，我觉得我已经很好地解决了这个问题，但现在我想使用@use 规则，因为逐步淘汰@import 是一回事。而且我找不到任何视频或任何真实的文章来解释如何正确使用它。

我遇到的问题是我无法理解如何实际使用它，我觉得我了解了基本概念，以及如何在每个部分中使用模块（我认为..），但是我觉得我不明白如何实际将所有部分放入主 .scss 文件中以编译成 css .. 这很难解释.. 我只是觉得我仍然需要至少 @import里面有@use的文件到一个要编译的主文件中..我猜这显然不是这种情况，但否则我无法解决..我只是@use我所有的文件吗想要导入到主文件中还是..？

如果有人能帮我解释一下，我将不胜感激。

谢谢

Answer 1

新的规则@use/@forward 和从@import 中的remove 对SASS 确实是一个非常大的影响。它导致了一个全新的写sass 的形式。尝试对开始使用新技术做一个简单的解释：

(1) @use 与@import 工作类似。它将（配置或部分）文件或模块中的代码添加到您的样式表中。

(2) 区别在于：SASS将变量/mixins/函数的作用域从全局（所有导入的文件=一个作用域）改为本地文件（变量只在实际文件中有效）。如果您需要使用另一个（配置或部分）文件中的变量/mixins/函数，您需要先将它们“包含”到实际文件中。

这意味着你的项目（*）：

//file ###> _config.scss

$columnWidth: 50%;
$projectColors: (
   primary: red,
   secondary: blue,
);


//file ###> _functions.scss 

@use 'config' as * // --> to use config vars (here: without namespace)

@function getColor( $name ){
   $color: map-get($projectColors, $name);  
   @return $color;
}


//file ###> _partial.scss

@use 'config' as *     // --> use config vars (here: without namespace)
@use 'functions' as *  // --> use functions (here: without namespace)

.class {
   width: $width;
   color: getColor( primary );
}


//file ###> myStylesheet.scss
// no need to @use 'config' or 'functions' 
// as they are not direct needed in this file

@use 'partial'  //--> write the css

---

( * ) 在不使用命名空间的情况下包含文件是一种特殊情况，可以使示例更简单。通常，您会将变量/mixins/函数包含在一个单独的命名空间中，并通过namespace.$variable 或namespace.mixin 调用它们。还有一些技术可以将特殊设置移动到@used 文件，以便您可以将变量设置移动到项目中。请看官方和优秀的描述：https://sass-lang.com/documentation/at-rules/use

---

注意事项：

(1) 因为它被大量讨论：是的。这确实是使用 SASS 的预期新方式。 (https://github.com/sass/sass/issues/2750)

(2) 非常有趣：Bootstrap 的实际全新版本已移至新的 Sass 版本。但正如我所见，Bootstrap 没有使用 @use 的新功能，并且仍然适用于 @import。这可能是有原因的......而且改变技术似乎并不容易。

(3) 此外，这种新技术似乎有点复杂，但也有一些优点。使用单独的命名空间可以更轻松地使用外部模块，而不会导致名称冲突。