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 以及从 @删除的规则导入确实对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将变量/混合/函数的范围从全局(所有导入的文件=一个范围)更改为本地文件(变量仅在实际文件中有效).如果您需要使用其他(配置文件或部分文件)文件中的变量/混合/函数，则需要先将它们包含"到实际文件中.

(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

---

(*)在不使用命名空间的情况下包含文件是一种特殊情况，可以简化示例.通常，您会将变量/混合/函数包含在单独的命名空间中，并通过 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屋！