Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="content">
  <a href="#" class="button">Button</a>
  <a href="#" class="button button--brand">Button</a>
  <a href="#" class="button button--positive">Button</a>
  <a href="#" class="button button--negative">Button</a>
</div>

<div class="sidebar">
  <a href="#" class="button">Button</a>
  <a href="#" class="button button--brand">Button</a>
  <a href="#" class="button button--positive">Button</a>
  <a href="#" class="button button--negative">Button</a>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

// Modifiers
// Used when a pattern of styling is reused in multiple locations

// Example: Buttons
// We have four types of button
// Default, brand, positive, negative

.button {
  display: inline-block;
}

.button--brand {}
.button--positive {}
.button--negative {}

// However, we may have a button that is very slightly different
// When placed inside the sidebar, we need the button to be full width
// We're going to target the button, rather than the button's modifier
// This means if we change the button modifier, the styling remains

.button {
  .sidebar & {
    display: block;
    text-align: center;
  }
}

// You may be wondering why we haven't just done the following:
//
// .sidebar {
//   .button {
//     display: block;
//   }
// }
//
// We could have done this.
// But I believe it's better to move styling for the button, into the button ‘namespace’
// * Easier to spot patterns of styling, which could be refactored into modifiers
// * You know exactly where to go. Want to style this button? Look at the button file!
//
// In this instance the sidebar is a partial.
// It is a contextual part of the application's layout.
//

.sidebar {
  float: left;
  width: 25%;
}

// As is the main content region.

.content {
  float: left;
  width: 75%;
}

SassMeister-output.css

.button {
  display: inline-block;
}

.sidebar .button {
  display: block;
  text-align: center;
}

.sidebar {
  float: left;
  width: 25%;
}

.content {
  float: left;
  width: 75%;
}

SassMeister-rendered.html

<div class="content">
  <a href="#" class="button">Button</a>
  <a href="#" class="button button--brand">Button</a>
  <a href="#" class="button button--positive">Button</a>
  <a href="#" class="button button--negative">Button</a>
</div>

<div class="sidebar">
  <a href="#" class="button">Button</a>
  <a href="#" class="button button--brand">Button</a>
  <a href="#" class="button button--positive">Button</a>
  <a href="#" class="button button--negative">Button</a>
</div>