mixins with extend

mixin-plus-extend.scss

%box {
  width: 500px;
  height: 400px;
}

%box-border {
  border: 3px solid #f00;
}

%clearfix {
  @include clearfix;
}

// more complex extend behavior consolidated in a mixin.
@mixin box($color: false, $border: false) {
  @extend %box;
  // optional styles and things
  @if $border {
    @extend %box-border;
  }
  @if $color != false {
    background-color: $color;
  }
}

// now the clearfix mixin will extend %clearfix, also mixins keep syntax consistent.
@mixin clearfix {
  @extend %clearfix;
}