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

问题描述

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

1. @forward './colors' show $red,$green,$blue; 只会转发来自 $red 的 $green、$blue 和 ./colors。 ./colors 否则会导出的所有其他值都将被忽略。
2. @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,'large': 1000 )
);

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

当然有更好的方法吗？

解决方法

我检查过，但无法确认问题。 （使用编译器测试：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，因为它是不在列表中。
• 就像礼貌的猜测（不知道）：您想显示/转发 media,media-context。那是函数/混合吗？如果 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.