Extends

SassMeister-input-HTML.html

<h1>Implement Inheritance Using '@extend'</h1>
<span class="message success">Success</span>
<span class="message error">Error</span>
<span class="message warning">Warning</span>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

body{
    background-color: #505050;
}

h1,h2,h3{
    text-align: center;
    color: white;
    font-family: Helvetica;
}

.message {
  position: relative;
  top: 50%;
  left: 30%;
  font-size: 36px;
  border: 1px solid #ccc;
  padding: 10px;
  color: white;
  font-family: Helvetica;
}

.success {
  background-color: green;
}

.error {
  background-color: red;
}

.warning {
  background-color: orange;
}

SassMeister-output.css

body {
  background-color: #505050;
}

h1, h2, h3 {
  text-align: center;
  color: white;
  font-family: Helvetica;
}

.message {
  position: relative;
  top: 50%;
  left: 30%;
  font-size: 36px;
  border: 1px solid #ccc;
  padding: 10px;
  color: white;
  font-family: Helvetica;
}

.success {
  background-color: green;
}

.error {
  background-color: red;
}

.warning {
  background-color: orange;
}

SassMeister-rendered.html

<h1>Implement Inheritance Using '@extend'</h1>
<span class="message success">Success</span>
<span class="message error">Error</span>
<span class="message warning">Warning</span>