// fd = foundation
%fd-button {
  border-radius: 30px;
  padding: 10px;
  text-align: center;
}

// quick code mock not tested
.banner-1 {
  &__btn {
    @extend %fd-button;
    background: #333;
    color: #fff;
  }
}

.banner-2 {
  &__btn {
    @extend %fd-button;
    background: #f1f1f1;
    color: #333;
  }
}

// mixin
@mixin fd-button() {
  border-radius: 30px;
  padding: 10px;
  text-align: center;
}

// quick code mock not tested
.banner-3 {
  &__btn {
    @include fd-button;
    background: blue;
    color: #fff;
  }
}

.banner-4 {
  &__btn {
    @include fd-button;
    background: green;
    color: #fff;
  }
}

.example {
  $root: &;

  #{$root}--test {
    background: red;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.