différence entre mixin, extend et placeholder dans sass

diff.css

.test-placeholder-foo .ph-foo, .test-placeholder-foo .bar {
  border: 1px solid red;
}

.test-placeholder-foo .ph-foo {
  background: red;
  display: block;
}

.extend-bar, .extend-foo .ext-foo, .test-extend-foo .ext-foo, .test-extend-foo .bar {
  border: 1px solid green;
}

.extend-foo .ext-foo, .test-extend-foo .ext-foo {
  background: green;
  display: block;
}

.test-mixin-foo .ext-foo {
  border: 1px solid yellow;
  background: yellow;
  display: block;
}
.test-mixin-foo .bar {
  border: 1px solid yellow;
}

diff.scss

///////////// PH

%placeholder-bar {
  border: 1px solid red;
}


%placeholder-foo {
  .ph-foo {
    @extend %placeholder-bar;
    background: red;
    display: block;
  }
}

.test-placeholder-foo {
  @extend %placeholder-foo;
  .bar {
    @extend %placeholder-bar;
  }
}

///////////// EXTEND

.extend-bar {
  border: 1px solid green;
}


.extend-foo {
  .ext-foo {
    @extend .extend-bar;
    background: green;
    display: block;
  }
}


.test-extend-foo {
  @extend .extend-foo;
  .bar {
    @extend .extend-bar;
  }
}


/////////////// MIXIN
@mixin mixin-bar {
  border: 1px solid yellow;
}


@mixin mixin-foo {
  .ext-foo {
    @include mixin-bar;
    background: yellow;
    display: block;
  }
}

.test-mixin-foo {
  @include mixin-foo;
  .bar {
    @include mixin-bar;
  }
}