Create a gradient with a Sass loop

<!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>

.block1 {
  background: #fcfcfc; }

.block2 {
  background: #fafafa; }

.block3 {
  background: #f7f7f7; }

.block4 {
  background: whitesmoke; }

.block5 {
  background: #f2f2f2; }

.block6 {
  background: #f0f0f0; }

.block7 {
  background: #ededed; }

.block8 {
  background: #ebebeb; }

.block9 {
  background: #e8e8e8; }

.block10 {
  background: #e6e6e6; }

.block11 {
  background: #e3e3e3; }

.block12 {
  background: #e0e0e0; }

.block13 {
  background: #dedede; }

.block14 {
  background: #dbdbdb; }

.block15 {
  background: #d9d9d9; }

.block16 {
  background: #d6d6d6; }

.block17 {
  background: #d4d4d4; }

.block18 {
  background: #d1d1d1; }

.block19 {
  background: #cfcfcf; }

.block20 {
  background: #cccccc; }

.block21 {
  background: #c9c9c9; }

.block22 {
  background: #c7c7c7; }

.block23 {
  background: #c4c4c4; }

.block24 {
  background: #c2c2c2; }

.block25 {
  background: #bfbfbf; }

.block26 {
  background: #bdbdbd; }

.block27 {
  background: #bababa; }

.block28 {
  background: #b8b8b8; }

.block29 {
  background: #b5b5b5; }

.block30 {
  background: #b3b3b3; }

.block31 {
  background: #b0b0b0; }

.block32 {
  background: #adadad; }

.block33 {
  background: #ababab; }

.block34 {
  background: #a8a8a8; }

.block35 {
  background: #a6a6a6; }

.block36 {
  background: #a3a3a3; }

.block37 {
  background: #a1a1a1; }

.block38 {
  background: #9e9e9e; }

.block39 {
  background: #9c9c9c; }

.block40 {
  background: #999999; }

.block41 {
  background: #969696; }

.block42 {
  background: #949494; }

.block43 {
  background: #919191; }

.block44 {
  background: #8f8f8f; }

.block45 {
  background: #8c8c8c; }

.block46 {
  background: #8a8a8a; }

.block47 {
  background: #878787; }

.block48 {
  background: #858585; }

.block49 {
  background: #828282; }

.block50 {
  background: gray; }

.block51 {
  background: #7d7d7d; }

.block52 {
  background: #7a7a7a; }

.block53 {
  background: #787878; }

.block54 {
  background: #757575; }

.block55 {
  background: #737373; }

.block56 {
  background: #707070; }

.block57 {
  background: #6e6e6e; }

.block58 {
  background: #6b6b6b; }

.block59 {
  background: dimgray; }

.block60 {
  background: #666666; }

.block61 {
  background: #636363; }

.block62 {
  background: #616161; }

.block63 {
  background: #5e5e5e; }

.block64 {
  background: #5c5c5c; }

.block65 {
  background: #595959; }

.block66 {
  background: #575757; }

.block67 {
  background: #545454; }

.block68 {
  background: #525252; }

.block69 {
  background: #4f4f4f; }

.block70 {
  background: #4d4d4d; }

.block71 {
  background: #4a4a4a; }

.block72 {
  background: #474747; }

.block73 {
  background: #454545; }

.block74 {
  background: #424242; }

.block75 {
  background: #404040; }

.block76 {
  background: #3d3d3d; }

.block77 {
  background: #3b3b3b; }

.block78 {
  background: #383838; }

.block79 {
  background: #363636; }

.block80 {
  background: #333333; }

.block81 {
  background: #303030; }

.block82 {
  background: #2e2e2e; }

.block83 {
  background: #2b2b2b; }

.block84 {
  background: #292929; }

.block85 {
  background: #262626; }

.block86 {
  background: #242424; }

.block87 {
  background: #212121; }

.block88 {
  background: #1f1f1f; }

.block89 {
  background: #1c1c1c; }

.block90 {
  background: #1a1a1a; }

.block91 {
  background: #171717; }

.block92 {
  background: #141414; }

.block93 {
  background: #121212; }

.block94 {
  background: #0f0f0f; }

.block95 {
  background: #0d0d0d; }

.block96 {
  background: #0a0a0a; }

.block97 {
  background: #080808; }

.block98 {
  background: #050505; }

.block99 {
  background: #030303; }

.block100 {
  background: black; }

div {
  font-size: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 300px;
  height: 20px;
  text-align: center; }

@for $i from 1 through 100 {
  .block#{$i} {
    background: darken(white, $i);
  }
}


































// Additional styling, not relevant to the lesson
div {
  font-size: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 300px;
  height: 20px;
  text-align:center;
}