Skip to content

Instantly share code, notes, and snippets.

@tolja
Created November 5, 2014 20:05
Show Gist options
  • Save tolja/af8e44c502ba3ce507e5 to your computer and use it in GitHub Desktop.
Save tolja/af8e44c502ba3ce507e5 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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,.wrench,.bolt {
border-radius: 50%;
padding: 15px;
width: 30px;
}
.wrench {
width: 100px;
}
.bolt {
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;
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment