Some demo with placeholder, extend and mixins

sass-inclusion.css

/*
 * Placeholder is not able to reference parent selector name like 
 * '&__something' but does not write anything if no selector extends it
 */
.bar, .foo {
  color: red;
  font-size: 1rem;
}
.title.bar, .title.foo {
  content: ">";
}
/*
 * Mixin has every feature but it write again CSS for each selector 
 * including it, also it can be passed a content block to include
 */
/*
 * Simple selector to extend is allways writed as CSS since it's just a 
 * normal rule
 */
.table-tennis, .pong, .ping {
  text-align: center;
}
.table-tennis.title, .title.pong, .title.ping {
  content: ">";
}
.table-tennis__item {
  border: 1px solid turquoise;
}

/*
 * Here comes includes and extends with custom properties
 */
.bar {
  color: yellow;
}

.pong {
  text-align: left;
  color: black;
}

.riri {
  margin: 1rem;
  padding-left: 1rem;
}
.riri.title {
  content: ">";
}
.riri__item {
  border: 1px solid gray;
}

.fifi {
  margin: 1rem;
  padding-left: 1rem;
  color: gold;
}
.fifi.title {
  content: ">";
}
.fifi__item {
  border: 1px solid gray;
}

.loulou {
  margin: 1rem;
  padding-left: 1rem;
  padding-left: 5rem;
}
.loulou.title {
  content: ">";
}
.loulou__item {
  border: 1px solid gray;
}

.daisy {
  margin: 1rem;
  padding-left: 1rem;
  line-height: 1.2;
}
.daisy .gontran {
  line-height: 1.8;
}
.daisy.title {
  content: ">";
}
.daisy__item {
  border: 1px solid gray;
}

sass-inclusion.scss

/*
 * Placeholder is not able to reference parent selector name like 
 * '&__something' but does not write anything if no selector extends it
 */
%vf-youwontseeme{
  background: red;
}

%vf-foobar {
  color: red;
  font-size: 1rem;
  
  &.title{
    content: ">";
  }
  
  &__item{
    border: 1px solid red;
  }
}


/*
 * Mixin has every feature but it write again CSS for each selector 
 * including it, also it can be passed a content block to include
 */
@mixin donald{
  margin: 1rem;
  padding-left: 1rem;
  @content;
  
  &.title{
    content: ">";
  }
  
  &__item{
    border: 1px solid gray;
  }
}


/*
 * Simple selector to extend is allways writed as CSS since it's just a 
 * normal rule
 */
.table-tennis{
  text-align: center;
  
  &.title{
    content: ">";
  }
  
  &__item{
    border: 1px solid turquoise;
  }
}


/*
 * Here comes includes and extends with custom properties
 */
.foo{
  @extend %vf-foobar;
}

.bar{
  @extend %vf-foobar;
  color: yellow;
}


.ping{
  @extend .table-tennis;
}

.pong{
  @extend .table-tennis;
  text-align: left;
  color: black;
}


.riri{
  @include donald;
}

.fifi{
  @include donald;
  color: gold;
}

.loulou{
  @include donald;
  padding-left: 5rem;
}

.daisy{
  @include donald{
    line-height: 1.2;
    
    .gontran{
      line-height: 1.8;
    }
  };
}

On basic usage, extend placeholder has lightest CSS footprint since it does not show until extended opposed to a selector extend which source will be writed to CSS even if not really used. Mixin has the worst footprint since it write again rules each time it is included.

On more advanced usage, extend (from placeholder or a selector) can compete with mixin footprint or even worse because it extends children rules even if they are not used, opposed to mixin that can be granular (one mixin for one rule).

Also mixin has capacity to be passed variables to change its property values without to rewrite it like from an extend. It even can be passed content block to directly include some props or rules.

Finally, mixin has the best rendering performances since render engine does not have to cross over a long selector like extends can create.