Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----


%widget {
  padding: 10px;
  h1 {
    margin-bottom: 10px;
  }

  p {
    color: hsl(0, 0%, 10%);
  }
}

.widget--alt {
  @extend %widget;
  border: 1px solid #ccc;
}
.widget--blue {
  @extend %widget;
  color:blue;
}
/* --------------------------- 
esempio senza placeholder
*/
.box {
  padding: 10px;
  h1 {
    margin-bottom: 10px;
  }

  p {
    color: hsl(0, 0%, 10%);
  }
}

.box--alt {
  @extend .box;
  border: 1px solid #ccc;
}
.box--blue {
  @extend .box;
  color:blue;
}

SassMeister-output.css

.widget--alt, .widget--blue {
  padding: 10px;
}
.widget--alt h1, .widget--blue h1 {
  margin-bottom: 10px;
}
.widget--alt p, .widget--blue p {
  color: #1a1a1a;
}

.widget--alt {
  border: 1px solid #ccc;
}

.widget--blue {
  color: blue;
}

/* --------------------------- 
esempio senza placeholder
*/
.box, .box--alt, .box--blue {
  padding: 10px;
}
.box h1, .box--alt h1, .box--blue h1 {
  margin-bottom: 10px;
}
.box p, .box--alt p, .box--blue p {
  color: #1a1a1a;
}

.box--alt {
  border: 1px solid #ccc;
}

.box--blue {
  color: blue;
}