Generated by SassMeister.com.

SassMeister-input.scss

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

// @extend Übung

// Aufgabe 1

// Schreibe ein @extend, um doppelten Code
// zu vermeiden. Am Ende sollen beide 
// Selektoren durch Komma getrennt
// die selben Attribute besitzen.

.div {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.noch_ein_div {
  background: blue;
  border-radius: 5px;
  color: #fff;
  margin-bottom: 15px;
  padding: 10px;
}

// Aufgabe 2

// In diesem Fall sind drei Selektoren 
// mit ihren Attributen zusammengefasst. 
// Trenne die Selektoren, sodass nur .socket
// alle drei Attribute (border-radius, padding,
// width) besitzt und erweitere
// die anderen beiden Selektoren mit einem
// @extend, wobei die Einzelattribute
// "width:100px" und "padding:14px" 
// jeweils das analoge Attribut überschreiben. 

.socket {
  border-radius: 50%;
  padding: 15px;
  width: 30px;
}
.wrench {
  @extend .socket;
  width: 100px;
}
.bolt {
  @extend .socket;
  padding: 14px;
}

// Aufgabe 3

// Hier wird der Selektor ".group" als 
// Clearfix genutzt, um floatende Div-Elemente
// zu clearen. Wir wollen aber keine Klasse
// für das Clearfix anlegen, sondern die 
// Attribute einer anderen Klasse (.factory) 
// durch ein extend zuweisen. Verändere den 
// ".group" Selektor, um einen Platzhalter 
// zu erstellen. Denke auch daran, das
// extend in dem ".factory" Selektor 
// entsprechend zu verändern. 

.group {
  zoom: 1;
  &:before,
  &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

.factory {
  @extend .group;
  background: #fff;
}

SassMeister-output.css

.div {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}

.noch_ein_div {
  background: blue;
  border-radius: 5px;
  color: #fff;
  margin-bottom: 15px;
  padding: 10px;
}

.socket, .wrench, .bolt {
  border-radius: 50%;
  padding: 15px;
  width: 30px;
}

.wrench {
  width: 100px;
}

.bolt {
  padding: 14px;
}

.group, .factory {
  zoom: 1;
}
.group:before, .factory:before, .group:after, .factory:after {
  content: '';
  display: table;
}
.group:after, .factory:after {
  clear: both;
}

.factory {
  background: #fff;
}