将变量从mixin @each循环传递到@content

时间:2018-08-28 00:34:17

标签: sass

是否可以将变量从@each内部运行的mixin循环传递到@content

请参见以下示例,了解我如何尝试在$passthis内容中使用@content变量。

// data formatted as an $key and $value array
$data: (
  a: 'house',
  b: 'electro',
  c: 'techno'
);


// example mixing running a @each loop using passed array
@mixin example($array) {

  // each converting $array into $key and $value for each loop 
  @each $key, $value in $array {

    // turn $value into $passthis var
    $passthis: $value;

    // content which contains $passthis variables 
    @content

  }
}


.music {

  @include example($data) {

    &-#{$passthis} {
      display: none !important;
    }

    &-2-#{$passthis} {
      display: inline !important;
    }

  }
}

在示例#{$passthis}中尝试使用mixin时,出现此错误。

Undefined variable: "$passthis".

是否可以通过这种方式使用@content

有关实时演示,请参见sassmeister

1 个答案:

答案 0 :(得分:1)

您可以使用以下正弦波将$passthis转换为全局变量:

$passthis: $value !global;

我创建了一个刺客:https://www.sassmeister.com/gist/36286bdae2bcc6f8b278254b8ec5b205