sass是如何导入模块的

Sass (Syntactically Awesome Style Sheets) 使用 @use 和 @forward 规则来导入模块（也称为partials）。 @import 规则曾经被使用，但现在已被弃用，并将在未来的 Sass 版本中移除。 建议使用 @use 和 @forward。

1. @use 规则:

• 语法: @use '<url>'; 或者 @use '<url>' as <namespace>; 或者 @use '<url>' with (<variable>: <value>, <variable>: <value>, ...);
• 功能: 加载另一个 Sass 文件的内容，并使其成员（变量、mixin、函数等）可在当前文件中使用。
• 命名空间: 默认情况下，导入的成员会放在一个以文件名（不含扩展名和下划线）为名称的命名空间下。 可以使用 as <namespace> 为命名空间指定一个不同的名称，或者使用 as * 将所有成员直接导入当前作用域 (不推荐，容易命名冲突)。
• 配置: with() 子句允许在导入模块时配置模块中的变量。
• 示例:

// _colors.scss
$primary-color: #3498db;
$secondary-color: #e74c3c;

// style.scss
@use 'colors';

body {
  background-color: colors.$primary-color;
  color: colors.$secondary-color;
}

@use 'colors' as palette;

.button {
  background-color: palette.$primary-color;
}

@use 'typography' with (
  $font-size: 18px
);

2. @forward 规则:

• 语法: @forward '<url>'; 或者 @forward '<url>' as <prefix>-*; 或者 @forward '<url>' hide <member>, <member>, ...; 或者 @forward '<url>' show <member>, <member>, ...;
• 功能: 将另一个 Sass 文件的内容包含到当前文件中，就像它们是直接写在当前文件中一样。 这对于创建库和模块集合非常有用。
• 前缀: as <prefix>-* 子句可以为所有转发的成员添加前缀，避免命名冲突。
• 隐藏/显示: hide 和 show 子句可以控制哪些成员被转发。
• 示例:

// _buttons.scss
.button {
  padding: 10px 20px;
}

// _forms.scss
@forward 'buttons';
input[type="submit"] {
  @extend .button;
}

// style.scss
@use 'forms';

3. @import (已弃用):

虽然仍然可以使用 @import，但强烈建议迁移到 @use 或 @forward。@import 有几个缺点，例如全局作用域和重复导入。

选择 @use 还是 @forward:

• 如果需要使用命名空间来组织代码并避免命名冲突，或者需要配置模块中的变量，请使用 @use。
• 如果需要将一个模块的成员直接包含到当前文件中，就像它们是直接写在当前文件中一样，请使用 @forward。 这通常用于创建库和模块集合。

总结:

@use 和 @forward 提供了一种更强大、更灵活的方式来管理 Sass 代码，并避免了 @import 的一些缺点。 建议始终使用 @use 和 @forward 来导入 Sass 模块。