Skip to content

Instantly share code, notes, and snippets.

@tolja
Created November 5, 2014 21:28
Show Gist options
  • Save tolja/84e8440b2d664ac6c12c to your computer and use it in GitHub Desktop.
Save tolja/84e8440b2d664ac6c12c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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;
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment