Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="error">
  Error 
</p>

<p class="success">
  Operation is successful
</p>

<p class="warning">
  Warning Do not...
</p>

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

%message {
  padding:10px;
  width:150px;
  text-align:center;
  color: #444;
  }

.error {
  border: 1px solid red;
  @extend %message;
}
  
.success {
  border: 1px solid green;
  @extend %message;
}

.warning {
  border: 1px solid yellow;
  @extend %message;
}

SassMeister-output.css

.error, .success, .warning {
  padding: 10px;
  width: 150px;
  text-align: center;
  color: #444;
}

.error {
  border: 1px solid red;
}

.success {
  border: 1px solid green;
}

.warning {
  border: 1px solid yellow;
}

SassMeister-rendered.html

<p class="error">
  Error 
</p>

<p class="success">
  Operation is successful
</p>

<p class="warning">
  Warning Do not...
</p>