将参数从mixin传递到内容块

Question

Sass队列中的这个公开问题似乎意味着传递参数@content不是一个功能,但Susy 2似乎能够做到这一点.追踪它是如何完成的虽然是一个兔子洞,我还没想到它.也许有人可以通过一个直截了当的例子来解释一些事情？我想创建一个自定义mixin,它将继承susy-breakpoint()使用自定义地图传递的布局.

示例:在全局Sass映射中定义4列布局,当在susy-breakpoint()s 内指定范围4时,将返回100%的宽度@content.当8周的cols的自定义布局被传递到直接susy-breakpoint()经由$layout参数,嵌套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地图上为mixin值设置mix 的默认变量允许mixin获取上下文.但为什么？为什么它不适用于不同的地图或外部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
}