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

Question

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

Answer 1

@use 和@forward 都是 Dart sass 提供的用于导入其他样式表的替代方法。当 @import 公开全局可访问的变量、mixin 和函数等成员时，@use 使用命名空间加载它们。因此，sass 鼓励使用 @use 而不是 @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 无法访问它。