Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

//http://sassandcompass.com 
//Sass and Compass for Designers第三章範例

$colorA:#5538c8;
$colorB:#137EDC;
$colorC:#74a098;
$colorD:#a08874;
$colorE:#f3cbab;

%box{
  padding: 2em;
  color: $colorA;
  background-color:$colorB;
}

.success-box{
  @extend %box;
  border: 2px dotted $colorC;
}

.warning-box{
  @extend %box;
  border: 2px dotted $colorD;
}

.info-box{
  @extend %box;
  border: 2px dotted $colorE;
}

SassMeister-output.css

.success-box, .warning-box, .info-box {
  padding: 2em;
  color: #5538c8;
  background-color: #137edc;
}

.success-box {
  border: 2px dotted #74a098;
}

.warning-box {
  border: 2px dotted #a08874;
}

.info-box {
  border: 2px dotted #f3cbab;
}