Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----



// Let's say I have a button component...
%button {
  display: inline-block;
  padding: 1rem;
  border: 1px solid gray;
  color: black;
  background: #EFEFEF;
  // ...etc.
}

// And I have a button group component that stacks all buttons inside
// and makes their backgrounds pink (for whatever reason)...
%buttonGroup {
  display: block;
  border: 2px solid gray;
  // ...etc.
  
  // Here is where the inner buttons are changed.
  %button {
    display: block;
    background: pink;
  }
}

//------------------------------------
// In a separate file, far far away...
//------------------------------------

// I can change the selectors just in this place, and
// the relationship between buttons and buttonGroups are preserved
button, input[type=button], input[type=submit], .button {
  @extend %button;
}

.buttonGroup {
  @extend %buttonGroup;
}

#epilogue {
  content: 'Yes, @extend has great potential to be misused, especially when it can easily be';
  content: 'substituted for a @mixin, but using placeholders for RELATIONSHIPS between';
  content: 'components is much, much simpler than using mixins.';
}

SassMeister-output.css

button, input[type=button], input[type=submit], .button {
  display: inline-block;
  padding: 1rem;
  border: 1px solid gray;
  color: black;
  background: #EFEFEF;
}

.buttonGroup {
  display: block;
  border: 2px solid gray;
}
.buttonGroup button, .buttonGroup input[type=button], .buttonGroup input[type=submit], .buttonGroup .button {
  display: block;
  background: pink;
}

#epilogue {
  content: 'Yes, @extend has great potential to be misused, especially when it can easily be';
  content: 'substituted for a @mixin, but using placeholders for RELATIONSHIPS between';
  content: 'components is much, much simpler than using mixins.';
}