Skip to content

Instantly share code, notes, and snippets.

@tlakomy

tlakomy/index.html

Created October 11, 2018 18:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tlakomy/25d0526c47b048b65717f80ff2e54665 to your computer and use it in GitHub Desktop.
Save tlakomy/25d0526c47b048b65717f80ff2e54665 to your computer and use it in GitHub Desktop.
Download ZIP
Egghead.io "Create a gradient with a Sass loop" - end state
Raw
index.html
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="css/main.css"></head>
<body>
<div class="block1">hello</div>
<div class="block2">hello</div>
<div class="block3">hello</div>
<div class="block4">hello</div>
<div class="block5">hello</div>
<div class="block6">hello</div>
<div class="block7">hello</div>
<div class="block8">hello</div>
<div class="block9">hello</div>
<div class="block10">hello</div>
<div class="block11">hello</div>
<div class="block12">hello</div>
<div class="block13">hello</div>
<div class="block14">hello</div>
<div class="block15">hello</div>
<div class="block16">hello</div>
<div class="block17">hello</div>
<div class="block18">hello</div>
<div class="block19">hello</div>
<div class="block20">hello</div>
<div class="block21">hello</div>
<div class="block22">hello</div>
<div class="block23">hello</div>
<div class="block24">hello</div>
<div class="block25">hello</div>
<div class="block26">hello</div>
<div class="block27">hello</div>
<div class="block28">hello</div>
<div class="block29">hello</div>
<div class="block30">hello</div>
<div class="block31">hello</div>
<div class="block32">hello</div>
<div class="block33">hello</div>
<div class="block34">hello</div>
<div class="block35">hello</div>
<div class="block36">hello</div>
<div class="block37">hello</div>
<div class="block38">hello</div>
<div class="block39">hello</div>
<div class="block40">hello</div>
<div class="block41">hello</div>
<div class="block42">hello</div>
<div class="block43">hello</div>
<div class="block44">hello</div>
<div class="block45">hello</div>
<div class="block46">hello</div>
<div class="block47">hello</div>
<div class="block48">hello</div>
<div class="block49">hello</div>
<div class="block50">hello</div>
<div class="block51">hello</div>
<div class="block52">hello</div>
<div class="block53">hello</div>
<div class="block54">hello</div>
<div class="block55">hello</div>
<div class="block56">hello</div>
<div class="block57">hello</div>
<div class="block58">hello</div>
<div class="block59">hello</div>
<div class="block60">hello</div>
<div class="block61">hello</div>
<div class="block62">hello</div>
<div class="block63">hello</div>
<div class="block64">hello</div>
<div class="block65">hello</div>
<div class="block66">hello</div>
<div class="block67">hello</div>
<div class="block68">hello</div>
<div class="block69">hello</div>
<div class="block70">hello</div>
<div class="block71">hello</div>
<div class="block72">hello</div>
<div class="block73">hello</div>
<div class="block74">hello</div>
<div class="block75">hello</div>
<div class="block76">hello</div>
<div class="block77">hello</div>
<div class="block78">hello</div>
<div class="block79">hello</div>
<div class="block80">hello</div>
<div class="block81">hello</div>
<div class="block82">hello</div>
<div class="block83">hello</div>
<div class="block84">hello</div>
<div class="block85">hello</div>
<div class="block86">hello</div>
<div class="block87">hello</div>
<div class="block88">hello</div>
<div class="block89">hello</div>
<div class="block90">hello</div>
<div class="block91">hello</div>
<div class="block92">hello</div>
<div class="block93">hello</div>
<div class="block94">hello</div>
<div class="block95">hello</div>
<div class="block96">hello</div>
<div class="block97">hello</div>
<div class="block98">hello</div>
<div class="block99">hello</div>
<div class="block100">hello</div>
</body>
</html>
Raw
main.scss
@for $i from 1 through 100 {
.block#{$i} {
background: darken(white, $i);
}
}
/* Hidden from the viewer */
div {
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 300px;
height: 20px;
text-align:center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment