Sass 的 @use 功能

Question

首先，我希望有人能够真正理解这个漫无目的的问题，因为我什至很难以连贯的方式表达我的意思，但这里是：

我不知道为什么我这么努力地想弄清楚这一点，但我已经在 SCSS 中使用 @import 一段时间了，感觉我对它很了解，但现在我想使用 @使用规则，因为逐步淘汰 @import 是一件事情。我找不到任何视频或任何真实的文章来解释如何正确使用它。

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

如果有人能为我阐明这一点，我将非常感激。

谢谢

Answer 1

新规则@use/@forward和删除@import确实对SASS产生了很大的影响。它导致了编写 sass 的全新形式。尝试对新技术的开始使用做一个简单的解释：

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

（2）区别在于：SASS将变量/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

---

( * ) 包含文件而不使用命名空间是一种特殊情况，可以使示例更加简单。通常，您会将变量/混合/函数包含到单独的名称空间中，并通过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) 而且似乎有点复杂，但新技术有一些优点。使用单独的命名空间可以更轻松地使用外部模块，而不会导致名称冲突。