Skip to content

Instantly share code, notes, and snippets.

@tolja

tolja/SassMeister-input-HTML.html

Last active August 29, 2015 14:08
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. tolja revised this gist Nov 5, 2014. No changes.
  2. tolja revised this gist Nov 5, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@

    // Aufgabe 2

    // Erstelle eine Variable für die "px" Werte und
    // Erstelle Variablen für die "px" Werte und
    // füge die Variablen im Code ein

    // Aufgabe 3
  3. tolja created this gist Nov 5, 2014.
    6 changes: 6 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    </body>
    51 changes: 51 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    // ----
    // Sass (v3.4.7)
    // Compass (v1.0.1)
    // ----

    // Aufgabe 1

    // Erstelle eine Variable für "black" und "yellow"
    // in dem unten gegeben Code und verwende die Variablen dann.

    // Aufgabe 2

    // Erstelle eine Variable für die "px" Werte und
    // füge die Variablen im Code ein

    // Aufgabe 3

    // Die Boxen sind fortlaufend halb so groß wie
    // ihr Vorgänger. Um die Größe zu halbieren kann
    // man im SCSS direkte Division anwenden, z.B.
    // $size / 2. Versuche dies mit den Variablen
    // anzuwenden.

    body {

    }
    .box1 {
    background-color: yellow;
    height: 400px;
    width: 400px;
    float:left;
    }
    .box2 {
    background-color: black;
    height: 200px;
    width: 200px;
    float:left;
    }
    .box3 {
    background-color: yellow;
    height: 100px;
    width: 100px;
    float:left;
    }
    .box4 {
    background-color: black;
    height: 50px;
    width: 50px;
    float:left;
    }

    27 changes: 27 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    .box1 {
    background-color: yellow;
    height: 400px;
    width: 400px;
    float: left;
    }

    .box2 {
    background-color: black;
    height: 200px;
    width: 200px;
    float: left;
    }

    .box3 {
    background-color: yellow;
    height: 100px;
    width: 100px;
    float: left;
    }

    .box4 {
    background-color: black;
    height: 50px;
    width: 50px;
    float: left;
    }
    6 changes: 6 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    </body>