Beispiel zur Verschachtelung von HTML Web Professional - CSS Vertiefung

SASS-Verschachtelung.html

<dic class="error">
    <h1>Fehlermeldung</h1>
    <p>
        <a href="#irgendwo">Link</a> normaler Text
    </p>
</dic>

SassMeister-input.scss

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

$message-color: red;
.error {
    
  color: $message-color;
  border: 1px solid $message-color;
    
  > h1 {
      border-bottom: 1px solid $message-color;
  }
  
  span.special, a {
      color: darken($message-color, 25%);
      
     &:hover {
         color: lighten($message-color, 20);
     }
  }
}

SassMeister-output.css

.error {
  color: red;
  border: 1px solid red;
}
.error > h1 {
  border-bottom: 1px solid red;
}
.error span.special, .error a {
  color: maroon;
}
.error span.special:hover, .error a:hover {
  color: #ff6666;
}

SassMeister-rendered.html

<dic class="error">
    <h1>Fehlermeldung</h1>
    <p>
        <a href="#irgendwo">Link</a> normaler Text
    </p>
</dic>

Hallo Reto

Im Code hat sich ein Fehler eingeschlichen:

anstelle von

Fehlermeldung

Link normaler Text