如何使用 `with` 和 `show` 子句来@forward 一些规则？

Question

SCSS @forward 规则支持几个不错的功能：

@forward './colors' show $red, $green, $blue; 只会从 ./colors 转发 $red、$green 和 $blue。 ./colors 将以其他方式导出的所有其他值都将被忽略。
@forward 'library' with ($space: 2em); 将使 $space 可用于库，覆盖库可能对 $space.

如何同时使用这两者？在我的例子中，我使用的是 include-media 库。我想定义一个像这样包装它的模块（稍微简化）：

@forward 'include-media with (
  $breakpoints: ( 'small': 400, 'medium': 700, 'large': 1000 )
) show media, media-context;

这里的目标是既向库提供它期望的 $breakpoints 值，又仅转发 media 和 media-context 混合宏。不幸的是，该代码无法编译并出现此错误：

Error: expected ";".
  ╷
3 │ ) show media, media-context;
  │   ^

如果我将 show 子句放在 with 子句之前，我会得到类似的结果。

这似乎不是最佳选择，但我可以想象这与两个文件一起使用：

// file _withBreakpoints.scss
@forward 'include-media' with (
  $breakpoints: ( 'small': 400, 'medium': 700, 'large': 1000 )
);

// file _filtered.scss
@forward './withBreakpoints' show media, media-context;

肯定有更好的方法吗？

Answer 1

我检查过了，但无法确认问题。（使用编译器测试：VS Code 扩展 Live SASS by（！）Glenn Marks）。

但重要的是： hide/show 必须在 with.

之前调用

以下语法适用于此处（仅示例）：

//### forward with hide

@forward 'variables' hide $color_red with(
    $color_orange: yellow,
    $color_gray: magenta,
); 



//### forward with show

@forward 'variables' show $color_red with(
    $color_red: orange,
);

但是您的代码中似乎还有一些其他问题：

您尝试 @forward 一个仅显示 media, media-context 的模块（这是唯一被转发的成员），但您尝试更改变量 $breakpoints 而不是 shown/forwarded 因为它不在列表中。
正如礼貌猜测（不知道）：你想show/forward media, media-context。那是functions/mixins吗？如果是 var 你应该用 $.
您错过了转发文件后的收盘价：@forward 'include-media ...

所以，也许您想尝试这样的事情：

@forward 'include-media' 
show [$?]media, [$?]media-context, $breakpoints
with (
  $breakpoints: ( 'small': 400, 'medium': 700, 'large': 1000 ),
);

//### Think about 'show': 
//### What is not in the list is not fowarded and cannot be used.
//### So I am not sure ...
//### if your module needs more members to be forwarded so it works. 
//### Depends on your module.

如何使用 `with` 和 `show` 子句来@forward 一些规则？

How to @forward some rules using both a `with` and a `show` clause?

sass

dart-sass