Beispiel zur Demonstration der Vererbung in SASS Web Professional - CSS-Vertiefung

SASS-Vererbung.html

<p class="message">
    Fehlermeldung
</p>

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

<p class="success">
    Erfolgsmeldug
</p>

SassMeister-input.scss

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

.message {
    border: 1px solid;
    padding: 1em;
}

.error {
    @extend .message;
    color: red;
    border-color: red;
}

.success {
    @extend .message;
    color: green;
    border-color: green;
}

SassMeister-output.css

.message, .error, .success {
  border: 1px solid;
  padding: 1em;
}

.error {
  color: red;
  border-color: red;
}

.success {
  color: green;
  border-color: green;
}

SassMeister-rendered.html

<p class="message">
    Fehlermeldung
</p>

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

<p class="success">
    Erfolgsmeldug
</p>