Cool things you may not know you could do with the & in sass

injecting_scope.css

.tab {
  .generatedcontent & {
    &:before, &:after {
      background-color: red;
    }
    .before, .after {
      display: none;
    }
  }
}

/* ============== Compiles To ============== */

.generatedcontent .tab:before, .generatedcontent .tab:after {
  background-color: red;
}
.generatedcontent .tab .before, .generatedcontent .tab .after {
  display: none;
}

multiple_times.css

/* You can use the & multiple times in a single rule */
.context {
  & .foo, &.foo, .foo & {
    color: red;
  }
}

/* ============== Compiles To ============== */

.context .foo, .context.foo, .foo .context {
  color: red;
}

simpler_child_selectors.css

/* This isn't a & feature, but it is awesome. */

a, button, span.button {
  > {
    img, span.icon {
       width: 12px;
       height: 12px;
    }
  }
}

/* ============== Compiles To ============== */


a > img,
a > span.icon,
button > img,
button > span.icon,
span.button > img,
span.button > span.icon {
  width: 12px;
  height: 12px;
}