Mixins Versus Extends

mixin-versus-extend.scss

.container {
  width: 100px;
}

%inner {
  font-family: Arial;
}

$fox-types: red, blue, green;

.container {
  > .fox-red {
    background-color: red;
    @extend %inner;
  }
}


/* ============================== */
/* ============================== */
/* ============================== */

@mixin container() { 
  font-family: Arial;
}

$fox-types: red, blue, green;
.container {
  > .fox-green {
    background-color: green;
    @include container;
  }
}

/* ============================== */
/* ============================== */
/* ============================== */


.container {
  > .fox-green {
    background-color: green;
    @extend %inner;
  }
}

/* ============================== */
/* ============================== */
/* ============================== */
.container {
  > .fox-blue {
    background-color: blue;
    @include container;
  }
}