Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

// SASS Advanced Übung

// Aufgabe 1 

// Strukturiere den Code so um, dass der Selektor ".alert" nur
// noch einmal vorkommt und als Parent-Element den Selektor 
// ".notice" besitzt. Auch soll statt dem Selektor ".notice .alert.a" 
// nur ".notice .a" stehen bleiben. 
// Am Ende soll es im CSS Code so aussehen:
// ".notice .alert {...}", ".notice .a {...}", etc.

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
}
.notice .alert {
  background: red;
  box-shadow: 0 0 10px red;
}
.notice .alert .a {
    background:black;
      &:hover {
        text-decoration:underline;
    }
}

// Aufgabe 2

// Vergebe Variablen, um den Code besser zu strukturieren. 
// Wie könnte man den Code noch lesbarer gestalten? 
// Hinweis: (@extend, @mixin,...)

.header {
  border:1px solid #000;
  width:50px;
  padding:20px;
  color:#235343;
  background-color:#222;
}
.footer {
  border:1px solid #000;
  width:50px;
  color:#235343;
}
.section {
  color:#235343;
  width:50px;
  padding:20px;
}

// Aufgabe 3 

// Verändere die Farben mit den SASS Funktionen 
// lighten($color,$amount) und darken($color,$amount) wobei 
// $color für den HEX-Wert und $amount für die Prozent-Anzahl steht.
// Erhöhe ".farben" um 20 Prozent und verdunkele ".mehrfarben" um
// 40 Prozent.
// Optional: Erstelle im HTML div-container, die ihre Farbe
// entsprechend verändern. 

.farben {
  color:#795464;
  background-color:#964753;
}
.mehrfarben {
  color:#864674;
  background-color:#469535;
}

SassMeister-output.css

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
}

.notice .alert {
  background: red;
  box-shadow: 0 0 10px red;
}

.notice .alert .a {
  background: black;
}
.notice .alert .a:hover {
  text-decoration: underline;
}

.header {
  border: 1px solid #000;
  width: 50px;
  padding: 20px;
  color: #235343;
  background-color: #222;
}

.footer {
  border: 1px solid #000;
  width: 50px;
  color: #235343;
}

.section {
  color: #235343;
  width: 50px;
  padding: 20px;
}

.farben {
  color: #795464;
  background-color: #964753;
}

.mehrfarben {
  color: #864674;
  background-color: #469535;
}