更新

Question

这open issue in the Sass queue似乎意味着将@content的参数传递给了susy-breakpoint()还不是一个功能，但Susy 2似乎能够做到这一点。追踪它的完成情况虽然有点像兔子洞，但我还没想到它。也许有人可以通过一个直截了当的例子来解释一些事情？我想创建一个自定义mixin，它将继承使用自定义地图从susy-breakpoint()传递的布局。

示例：在全局Sass地图中定义4列布局时，如果在@content＆＃39; s {{susy-breakpoint() {{{{{{{ 1}}。当通过$layout参数将8个cols的自定义布局直接传递给span()时，嵌套的@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(); } } mixin将获取新的布局。但是自定义嵌套mixin不会选择新的布局。为什么呢？

@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;
  }
}

编译CSS：

inherit-value()

更新

我发现在现有$susy地图上使susy-breakpoint()混合使用列值键的默认变量允许mixin获取上下文。但为什么？为什么它不适用于不同的地图或{{1}}之外？

见这里：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传递到内容块

更新

1 个答案: