1

SCSS@forward规则支持几个不错的特性：

  1. @forward './colors' show $red, $green, $blue;只会转发$red,$green和$bluefrom ./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-contextmixins。不幸的是，该代码无法编译并出现此错误：

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;

肯定有更好的方法吗？

4

1 回答 1

1

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

但重要的是： hide/show必须调用 BEFORE 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.
于 2021-04-20T11:43:39.573 回答