Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// Compass Placeholders (v1.1.1)
// ----

@import "compass";
@import "compass-placeholders";

// @extend helps, when all properties 
// can be combined in one selector:

.good-example-2 {
  @extend %display-none;
}

.good-example-2 {
  color: black;
  display: none;
  font-size: 2em;
  
  .parent:hover & {
    @extend %display-none;
  }
}

// When only few properties can be combined,
// @extend is usually a bad idea:

.bad-example {
  @extend %display-none;
  font-size: 2em;
}

SassMeister-output.css

.good-example-2, .parent:hover .good-example-2, .bad-example {
  display: none;
}

.good-example-2 {
  color: black;
  display: none;
  font-size: 2em;
}

.bad-example {
  font-size: 2em;
}