Skip to content

Instantly share code, notes, and snippets.

@tolja

tolja/SassMeister-input.scss

Created November 5, 2014 21:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tolja/84e8440b2d664ac6c12c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tolja/84e8440b2d664ac6c12c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tolja created this gist Nov 5, 2014.
    74 changes: 74 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    // ----
    // 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;
    }
    47 changes: 47 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    .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;
    }