Skip to content

Instantly share code, notes, and snippets.

@tolja

tolja/SassMeister-input-HTML.html

Created November 5, 2014 22:14
Show Gist options
  • Save tolja/736b2103a667562df0db to your computer and use it in GitHub Desktop.
Save tolja/736b2103a667562df0db to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
Raw
SassMeister-input.scss
// ----
// 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 Variablen für die "px" Werte und
// füge die Variablen dann 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;
}
Raw
SassMeister-output.css
.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;
}
Raw
SassMeister-rendered.html
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment