将参数从 mixin 传递到内容块

Question

这个open issue in the Sass queue seems to imply passing arguments to @content is not a feature yet, but Susy 2好像可以这样。追踪它是如何完成的有点像兔子洞，我还没有弄明白。也许有人可以通过一个简单的例子来说明一些问题？我想创建一个自定义 mixin，它将使用自定义地图继承从 susy-breakpoint() 传递的布局。

示例： 在全局 Sass 地图中定义 4 列布局，当指定跨度为 4 时，return 宽度将为 100%在 susy-breakpoint() 的 @content 中。当 8 列的自定义布局通过 $layout 参数直接传递给 susy-breakpoint() 时，嵌套的 span() mixin 会选择新布局。但是自定义嵌套混入不会采用新布局。为什么？

@import 'susy';

$susy: (
  columns: 4,
);

@mixin inherit-layout($layout: 4) {
  columns: $layout;
}

@include susy-breakpoint(30em) {
  // nested code uses an 4-column grid from global map
  .global-cols {
    @include span(4);
    @include inherit-layout();
  }
}

@include susy-breakpoint(48em, $layout: 8) {
  // nested code uses an 8-column grid from $layout
  .inherited-cols {
    @include span(4);
    @include inherit-layout();
  }
}

已编译CSS：

@media (min-width: 30em) {
  .global-cols {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
    columns: 4;
  }
}

@media (min-width: 48em) {
  .inherited-cols {
    width: 48.71795%;
    float: left;
    margin-right: 2.5641%;
    columns: 4;
  }
}

更新：

我发现将 inherit-value() 混入的默认变量设为现有 $susy 映射上列键的值允许混入获取上下文。但为什么？为什么它不适用于不同的地图或 susy-breakpoint() 以外的地图？

看这里：http://sassmeister.com/gist/d86e217aca3aa8337b83

Answer 1

Susy 不向 @content 传递任何参数——相反，我们在内容块的开头更改全局变量，然后在结尾处将其改回：

$example: 4;

@mixin local($local) {
  $old: $example;
  $example: $local !global;

  @content

  $example: $old !global;
}

// out here, $example == 4

@include local(12) {
  // in here, $example == 12
}

将参数从 mixin 传递到内容块

Passing arguments from a mixin to a content block

sass

susy

更新：