CODEWITHSUNDEEP
csssass
Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14784

SASS - Why is this mixin not being included?

I'm new to SASS, so please bear with me if this seems glaringly obvious.

I have some test SASS code:

$background : "yellow";
$color : "green";

%my-placeholder { 

  background: $background;
  color: $color;

}

@mixin my-mixin($background,$color) {

  %my-placeholder { 

    background: $background;
    color: $color;

  }

}

.my-class {

  /* Why does this 'my-mixin()' NOT get included to the class? */
  @include my-mixin($background,$color);
  color: blue;

}

It's a combination of variables, placeholders and mixins, which outputs:

.my-class {
  /* Why does this 'my-mixin()' NOT get included to the class? */
  color: blue;
}

As you can see, the @include of the mixin, which holds a call to overwrite a placeholder, doesn't get used within the .my-class selection. Why is this?

I have a SASS-meister where you can see this live: http://sassmeister.com/gist/8015459

Is this normal behaviour? Are there dependencies which I'm missing in order to use this feature?

Thanks!

Upvotes: 1

Views: 590

Answers (1)

Bill Criswell
Bill Criswell

Reputation: 32921

It is being included but you're just not calling it. % is a placeholder selector so you need to @extend %my-placeholder after you call the mixin. This will still end up with something you probably aren't expecting. 

.my-class {
  color: blue;
}
.my-class .my-class {
  background: "yellow";
  color: "green";
}

I think you might be better off with a simple mixin since you need to switch the variables up.

@mixin my-mixin( $background: #ccc, $color: #000 ){
  background: $background;
  color: $color;
}

.my-class {
  @include my-mixin( red, green );
}

Also, it seems you might be thinking that a variable defined inside a selector will make it local, this isn't the case. It definitely threw me for a loop while I was learning.

$color: red;

.foo {
  $color: blue;
  color: $color; // $color is blue...
}

.bar {
  color: $color; // $color is still blue, not red...
}

Upvotes: 1

Related Questions