CODEWITHSUNDEEP
sass
joshmoto
joshmoto

Reputation: 5088

Pass variable from mixin @each loop into @content

Is it possible to pass a variable from an @each loop running inside a mixin into the @content.

See example below on how I try to use the $passthis variable inside the @content 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;
    }

  }
}

When I try to use #{$passthis} in the example mixin I get this error.

Undefined variable: "$passthis".

Is it impossible to use @content this way?

See sassmeister for live demo.

Upvotes: 1

Views: 296

Answers (1)

ReSedano
ReSedano

Reputation: 5060

You can transform $passthis in a global variable using this sintax:

$passthis: $value !global;

I created a sassmeister: https://www.sassmeister.com/gist/36286bdae2bcc6f8b278254b8ec5b205

Upvotes: 1

Related Questions