@use
和 @forward
这两个规则都可以从其他 Sass 样式表中加载 mixins、函数和变量,并将来自多个样式表的 CSS 组合在一起。但我想知道它们之间有什么区别以及何时使用哪个?
最佳答案
@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 无法访问它。
关于css - SASS 中@use 和@forward 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73353442/