Sass 的@use 特性 [英] The @use feature of Sass

问题描述

首先，我希望有人能够真正理解这个漫无边际的问题，因为我什至都在努力以连贯的方式表达我的意思，但这里是:

First of all, I hope someone can actually understand this rambling question because I'm struggling to even word what I mean in a coherent way, but here goes:

我不知道为什么我这么费劲才弄清楚这一点，但是我已经将@import 与 SCSS 一起使用了一段时间，并且感觉我对它的了解相当不错，但现在我想使用@use 规则，因为逐步淘汰@import 是一回事.而且我找不到任何解释如何正确使用它的视频或任何真实的文章.

I don't know why I'm struggling so much to figure this out, but I've been using @import with SCSS for a while now and feel I have my head around it fairly well, but now I want to use the @use rule since the phasing out of @import is a thing. And I can't find any videos or any real articles explaining how to use it properly.

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

The problem I'm having is I can't get my head around how to actually use it, I feel like I get the basic idea, and how to use the modules in each partial (I think..), but I feel like I don't understand how to actually get all of the partials into a main .scss file to be compiled into css.. This is hard to explain.. I just feel like I would still need to @import at least the files that have @use inside them into a main file for it to be compiled.. I'm guessing this obviously isn't the case, but otherwise I can't work it out.. Do I just @use all the files I want imported into the main file or..?

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

If anyone could shed some light on this for me, I would be really grateful.

谢谢

推荐答案

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

The new rules @use/@forward and the remove from @import are indeed a really big impact to SASS. It leads to a complete new form to write sass. A try to make an easy explanation for the beginning to use the new technique:

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

(1) @use works similar to @import. It adds the code from a (config- or partial-)file or a module to your stylesheet.

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

(2) The difference is: SASS changes the scope of variables/mixins/functions from global (all imported files = one scope) to local files (variables are only valid in the actual file). If you need to use variables/mixins/functions from another (config- or partial-)file you need to 'include' them to the actual file first.

这意味着对于您的项目(*):

That means for your project(*):

//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/文档/规则/使用

( * ) Including files without using a namespace is a special case to make the example more easy. Normaly you will include variables/mixins/functions to a separated namespace and call them by namespace.$variable or namespace.mixin. And there are techniques to move special settings to a @used file as well so you can move variable settings to the project. Please have a look to official and excelent description: https://sass-lang.com/documentation/at-rules/use

注意:

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

(1) As it is heavily discussed: Yes. This is INDEED the intended new way to work with SASS. (https://github.com/sass/sass/issues/2750)

(2) 非常有趣:Bootstrap 的实际全新版本已经迁移到新的 Sass 版本.但正如我所看到的，Bootstrap 没有使用该新功能 @use 并且仍然可以与 @import 一起使用.这可能是有原因的......而且改变技术似乎并不容易.

(2) Very interesting: The actual brandnew version from Bootstrap has moved to the new Sass Version. But as I have seen Bootstrap does not use that new feature @use and still works with @import. That may have reasons ... and it seems not to easy to change the technique.

(3) 而且似乎有点复杂，新技术带来了一些优势.使用单独的命名空间可以更轻松地使用外部模块而不会导致名称冲突.

(3) Also it seems to be a little bit complicated there are some advantages comming with that new technique. Using separate namespaces make it much mor easier to work with external modules without causing name conflicts.

这篇关于Sass 的@use 特性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！