SASS中@use和@forward有什么区别？

Question

@use这@forward两个规则都可以从其他 Sass 样式表加载 mixins、函数和变量，并将多个样式表中的 CSS 组合在一起。但我想知道它们之间有什么区别以及何时使用哪一个？

Answer 1

和@use都是@forwardDart sass 提供的用于导入其他样式表的替代方案。当@import公开全局可访问的变量、mixin 和函数等成员时，@use使用命名空间加载它们。因此，sass 鼓励使用@useover@import。

说到另一个， 与@forward配对@use。例如，当必须在多个样式表中重用一组样式表时，我们可以使用将所有样式表合并到一个入口点中，@forward并@use在其他样式表中使用。

   // src/_list.scss
   @mixin list-reset {
     margin: 0;
     padding: 0;
     list-style: none;
    }

   // bootstrap.scss
   @forward "src/list";

   // styles.scss
   @use "bootstrap";
   li {
    @include bootstrap.list-reset;
   }

在上面的示例中，如果您尝试使用@use代替@forward，则 _list.scss 中的成员可能可用于 bootstrap.scss，但 styles.scs 无法访问它。