Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="elem-1"></div>
<div class="elem-2"></div>
<div class="elem-3"></div>
<div class="elem-4"></div>
<div class="elem-5"></div>
<div class="elem-6"></div>
<div class="elem-7"></div>
<div class="elem-8"></div>
<div class="elem-9"></div>
<div class="elem-10"></div>
<div class="elem-11"></div>
<div class="elem-12"></div>
<div class="elem-13"></div>
<div class="elem-14"></div>
<div class="elem-15"></div>
<div class="elem-16"></div>
<div class="elem-17"></div>
<div class="elem-18"></div>
<div class="elem-19"></div>
<div class="elem-20"></div>
<div class="elem-21"></div>
<div class="elem-22"></div>
<div class="elem-23"></div>
<div class="elem-24"></div>
<div class="elem-25"></div>
<div class="elem-26"></div>
<div class="elem-27"></div>
<div class="elem-28"></div>
<div class="elem-29"></div>
<div class="elem-30"></div>
<div class="elem-31"></div>
<div class="elem-32"></div>
<div class="elem-33"></div>
<div class="elem-34"></div>
<div class="elem-35"></div>
<div class="elem-36"></div>
<div class="elem-37"></div>
<div class="elem-38"></div>
<div class="elem-39"></div>
<div class="elem-40"></div>
<div class="elem-41"></div>
<div class="elem-42"></div>
<div class="elem-43"></div>
<div class="elem-44"></div>
<div class="elem-45"></div>
<div class="elem-46"></div>
<div class="elem-47"></div>
<div class="elem-48"></div>
<div class="elem-49"></div>
<div class="elem-50"></div>
<div class="elem-51"></div>
<div class="elem-52"></div>
<div class="elem-53"></div>
<div class="elem-54"></div>
<div class="elem-55"></div>
<div class="elem-56"></div>
<div class="elem-57"></div>
<div class="elem-58"></div>
<div class="elem-59"></div>
<div class="elem-60"></div>
<div class="elem-61"></div>
<div class="elem-62"></div>
<div class="elem-63"></div>
<div class="elem-64"></div>
<div class="elem-65"></div>
<div class="elem-66"></div>
<div class="elem-67"></div>
<div class="elem-68"></div>
<div class="elem-69"></div>
<div class="elem-70"></div>
<div class="elem-71"></div>
<div class="elem-72"></div>
<div class="elem-73"></div>
<div class="elem-74"></div>
<div class="elem-75"></div>
<div class="elem-76"></div>
<div class="elem-77"></div>
<div class="elem-78"></div>
<div class="elem-79"></div>
<div class="elem-80"></div>
<div class="elem-81"></div>
<div class="elem-82"></div>
<div class="elem-83"></div>
<div class="elem-84"></div>
<div class="elem-85"></div>
<div class="elem-86"></div>
<div class="elem-87"></div>
<div class="elem-88"></div>
<div class="elem-89"></div>
<div class="elem-90"></div>
<div class="elem-91"></div>
<div class="elem-92"></div>
<div class="elem-93"></div>
<div class="elem-94"></div>
<div class="elem-95"></div>
<div class="elem-96"></div>
<div class="elem-97"></div>
<div class="elem-98"></div>
<div class="elem-99"></div>
<div class="elem-100"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

$w: 1;
$h: 1;

@while $h <= 100 {
  @while $w <= 100 {
    .elem-#{$w} {
      $left: 100 - $w;
      $color: lighten(red, ($w / 2));
      position: left;
      right: #{$left}vw;
      width: #{$left}vw;
      height: 20vh;
      background-color: $color;
      color: red;
      top: #{$h}vh;
    }  
    $w: $w + 1;
    
  }
  $h: $h + 1;
}

SassMeister-output.css

.elem-1 {
  position: left;
  right: 99vw;
  width: 99vw;
  height: 20vh;
  background-color: #ff0303;
  color: red;
  top: 1vh;
}

.elem-2 {
  position: left;
  right: 98vw;
  width: 98vw;
  height: 20vh;
  background-color: #ff0505;
  color: red;
  top: 1vh;
}

.elem-3 {
  position: left;
  right: 97vw;
  width: 97vw;
  height: 20vh;
  background-color: #ff0808;
  color: red;
  top: 1vh;
}

.elem-4 {
  position: left;
  right: 96vw;
  width: 96vw;
  height: 20vh;
  background-color: #ff0a0a;
  color: red;
  top: 1vh;
}

.elem-5 {
  position: left;
  right: 95vw;
  width: 95vw;
  height: 20vh;
  background-color: #ff0d0d;
  color: red;
  top: 1vh;
}

.elem-6 {
  position: left;
  right: 94vw;
  width: 94vw;
  height: 20vh;
  background-color: #ff0f0f;
  color: red;
  top: 1vh;
}

.elem-7 {
  position: left;
  right: 93vw;
  width: 93vw;
  height: 20vh;
  background-color: #ff1212;
  color: red;
  top: 1vh;
}

.elem-8 {
  position: left;
  right: 92vw;
  width: 92vw;
  height: 20vh;
  background-color: #ff1414;
  color: red;
  top: 1vh;
}

.elem-9 {
  position: left;
  right: 91vw;
  width: 91vw;
  height: 20vh;
  background-color: #ff1717;
  color: red;
  top: 1vh;
}

.elem-10 {
  position: left;
  right: 90vw;
  width: 90vw;
  height: 20vh;
  background-color: #ff1a1a;
  color: red;
  top: 1vh;
}

.elem-11 {
  position: left;
  right: 89vw;
  width: 89vw;
  height: 20vh;
  background-color: #ff1c1c;
  color: red;
  top: 1vh;
}

.elem-12 {
  position: left;
  right: 88vw;
  width: 88vw;
  height: 20vh;
  background-color: #ff1f1f;
  color: red;
  top: 1vh;
}

.elem-13 {
  position: left;
  right: 87vw;
  width: 87vw;
  height: 20vh;
  background-color: #ff2121;
  color: red;
  top: 1vh;
}

.elem-14 {
  position: left;
  right: 86vw;
  width: 86vw;
  height: 20vh;
  background-color: #ff2424;
  color: red;
  top: 1vh;
}

.elem-15 {
  position: left;
  right: 85vw;
  width: 85vw;
  height: 20vh;
  background-color: #ff2626;
  color: red;
  top: 1vh;
}

.elem-16 {
  position: left;
  right: 84vw;
  width: 84vw;
  height: 20vh;
  background-color: #ff2929;
  color: red;
  top: 1vh;
}

.elem-17 {
  position: left;
  right: 83vw;
  width: 83vw;
  height: 20vh;
  background-color: #ff2b2b;
  color: red;
  top: 1vh;
}

.elem-18 {
  position: left;
  right: 82vw;
  width: 82vw;
  height: 20vh;
  background-color: #ff2e2e;
  color: red;
  top: 1vh;
}

.elem-19 {
  position: left;
  right: 81vw;
  width: 81vw;
  height: 20vh;
  background-color: #ff3030;
  color: red;
  top: 1vh;
}

.elem-20 {
  position: left;
  right: 80vw;
  width: 80vw;
  height: 20vh;
  background-color: #ff3333;
  color: red;
  top: 1vh;
}

.elem-21 {
  position: left;
  right: 79vw;
  width: 79vw;
  height: 20vh;
  background-color: #ff3636;
  color: red;
  top: 1vh;
}

.elem-22 {
  position: left;
  right: 78vw;
  width: 78vw;
  height: 20vh;
  background-color: #ff3838;
  color: red;
  top: 1vh;
}

.elem-23 {
  position: left;
  right: 77vw;
  width: 77vw;
  height: 20vh;
  background-color: #ff3b3b;
  color: red;
  top: 1vh;
}

.elem-24 {
  position: left;
  right: 76vw;
  width: 76vw;
  height: 20vh;
  background-color: #ff3d3d;
  color: red;
  top: 1vh;
}

.elem-25 {
  position: left;
  right: 75vw;
  width: 75vw;
  height: 20vh;
  background-color: #ff4040;
  color: red;
  top: 1vh;
}

.elem-26 {
  position: left;
  right: 74vw;
  width: 74vw;
  height: 20vh;
  background-color: #ff4242;
  color: red;
  top: 1vh;
}

.elem-27 {
  position: left;
  right: 73vw;
  width: 73vw;
  height: 20vh;
  background-color: #ff4545;
  color: red;
  top: 1vh;
}

.elem-28 {
  position: left;
  right: 72vw;
  width: 72vw;
  height: 20vh;
  background-color: #ff4747;
  color: red;
  top: 1vh;
}

.elem-29 {
  position: left;
  right: 71vw;
  width: 71vw;
  height: 20vh;
  background-color: #ff4a4a;
  color: red;
  top: 1vh;
}

.elem-30 {
  position: left;
  right: 70vw;
  width: 70vw;
  height: 20vh;
  background-color: #ff4d4d;
  color: red;
  top: 1vh;
}

.elem-31 {
  position: left;
  right: 69vw;
  width: 69vw;
  height: 20vh;
  background-color: #ff4f4f;
  color: red;
  top: 1vh;
}

.elem-32 {
  position: left;
  right: 68vw;
  width: 68vw;
  height: 20vh;
  background-color: #ff5252;
  color: red;
  top: 1vh;
}

.elem-33 {
  position: left;
  right: 67vw;
  width: 67vw;
  height: 20vh;
  background-color: #ff5454;
  color: red;
  top: 1vh;
}

.elem-34 {
  position: left;
  right: 66vw;
  width: 66vw;
  height: 20vh;
  background-color: #ff5757;
  color: red;
  top: 1vh;
}

.elem-35 {
  position: left;
  right: 65vw;
  width: 65vw;
  height: 20vh;
  background-color: #ff5959;
  color: red;
  top: 1vh;
}

.elem-36 {
  position: left;
  right: 64vw;
  width: 64vw;
  height: 20vh;
  background-color: #ff5c5c;
  color: red;
  top: 1vh;
}

.elem-37 {
  position: left;
  right: 63vw;
  width: 63vw;
  height: 20vh;
  background-color: #ff5e5e;
  color: red;
  top: 1vh;
}

.elem-38 {
  position: left;
  right: 62vw;
  width: 62vw;
  height: 20vh;
  background-color: #ff6161;
  color: red;
  top: 1vh;
}

.elem-39 {
  position: left;
  right: 61vw;
  width: 61vw;
  height: 20vh;
  background-color: #ff6363;
  color: red;
  top: 1vh;
}

.elem-40 {
  position: left;
  right: 60vw;
  width: 60vw;
  height: 20vh;
  background-color: #ff6666;
  color: red;
  top: 1vh;
}

.elem-41 {
  position: left;
  right: 59vw;
  width: 59vw;
  height: 20vh;
  background-color: #ff6969;
  color: red;
  top: 1vh;
}

.elem-42 {
  position: left;
  right: 58vw;
  width: 58vw;
  height: 20vh;
  background-color: #ff6b6b;
  color: red;
  top: 1vh;
}

.elem-43 {
  position: left;
  right: 57vw;
  width: 57vw;
  height: 20vh;
  background-color: #ff6e6e;
  color: red;
  top: 1vh;
}

.elem-44 {
  position: left;
  right: 56vw;
  width: 56vw;
  height: 20vh;
  background-color: #ff7070;
  color: red;
  top: 1vh;
}

.elem-45 {
  position: left;
  right: 55vw;
  width: 55vw;
  height: 20vh;
  background-color: #ff7373;
  color: red;
  top: 1vh;
}

.elem-46 {
  position: left;
  right: 54vw;
  width: 54vw;
  height: 20vh;
  background-color: #ff7575;
  color: red;
  top: 1vh;
}

.elem-47 {
  position: left;
  right: 53vw;
  width: 53vw;
  height: 20vh;
  background-color: #ff7878;
  color: red;
  top: 1vh;
}

.elem-48 {
  position: left;
  right: 52vw;
  width: 52vw;
  height: 20vh;
  background-color: #ff7a7a;
  color: red;
  top: 1vh;
}

.elem-49 {
  position: left;
  right: 51vw;
  width: 51vw;
  height: 20vh;
  background-color: #ff7d7d;
  color: red;
  top: 1vh;
}

.elem-50 {
  position: left;
  right: 50vw;
  width: 50vw;
  height: 20vh;
  background-color: #ff8080;
  color: red;
  top: 1vh;
}

.elem-51 {
  position: left;
  right: 49vw;
  width: 49vw;
  height: 20vh;
  background-color: #ff8282;
  color: red;
  top: 1vh;
}

.elem-52 {
  position: left;
  right: 48vw;
  width: 48vw;
  height: 20vh;
  background-color: #ff8585;
  color: red;
  top: 1vh;
}

.elem-53 {
  position: left;
  right: 47vw;
  width: 47vw;
  height: 20vh;
  background-color: #ff8787;
  color: red;
  top: 1vh;
}

.elem-54 {
  position: left;
  right: 46vw;
  width: 46vw;
  height: 20vh;
  background-color: #ff8a8a;
  color: red;
  top: 1vh;
}

.elem-55 {
  position: left;
  right: 45vw;
  width: 45vw;
  height: 20vh;
  background-color: #ff8c8c;
  color: red;
  top: 1vh;
}

.elem-56 {
  position: left;
  right: 44vw;
  width: 44vw;
  height: 20vh;
  background-color: #ff8f8f;
  color: red;
  top: 1vh;
}

.elem-57 {
  position: left;
  right: 43vw;
  width: 43vw;
  height: 20vh;
  background-color: #ff9191;
  color: red;
  top: 1vh;
}

.elem-58 {
  position: left;
  right: 42vw;
  width: 42vw;
  height: 20vh;
  background-color: #ff9494;
  color: red;
  top: 1vh;
}

.elem-59 {
  position: left;
  right: 41vw;
  width: 41vw;
  height: 20vh;
  background-color: #ff9696;
  color: red;
  top: 1vh;
}

.elem-60 {
  position: left;
  right: 40vw;
  width: 40vw;
  height: 20vh;
  background-color: #ff9999;
  color: red;
  top: 1vh;
}

.elem-61 {
  position: left;
  right: 39vw;
  width: 39vw;
  height: 20vh;
  background-color: #ff9c9c;
  color: red;
  top: 1vh;
}

.elem-62 {
  position: left;
  right: 38vw;
  width: 38vw;
  height: 20vh;
  background-color: #ff9e9e;
  color: red;
  top: 1vh;
}

.elem-63 {
  position: left;
  right: 37vw;
  width: 37vw;
  height: 20vh;
  background-color: #ffa1a1;
  color: red;
  top: 1vh;
}

.elem-64 {
  position: left;
  right: 36vw;
  width: 36vw;
  height: 20vh;
  background-color: #ffa3a3;
  color: red;
  top: 1vh;
}

.elem-65 {
  position: left;
  right: 35vw;
  width: 35vw;
  height: 20vh;
  background-color: #ffa6a6;
  color: red;
  top: 1vh;
}

.elem-66 {
  position: left;
  right: 34vw;
  width: 34vw;
  height: 20vh;
  background-color: #ffa8a8;
  color: red;
  top: 1vh;
}

.elem-67 {
  position: left;
  right: 33vw;
  width: 33vw;
  height: 20vh;
  background-color: #ffabab;
  color: red;
  top: 1vh;
}

.elem-68 {
  position: left;
  right: 32vw;
  width: 32vw;
  height: 20vh;
  background-color: #ffadad;
  color: red;
  top: 1vh;
}

.elem-69 {
  position: left;
  right: 31vw;
  width: 31vw;
  height: 20vh;
  background-color: #ffb0b0;
  color: red;
  top: 1vh;
}

.elem-70 {
  position: left;
  right: 30vw;
  width: 30vw;
  height: 20vh;
  background-color: #ffb3b3;
  color: red;
  top: 1vh;
}

.elem-71 {
  position: left;
  right: 29vw;
  width: 29vw;
  height: 20vh;
  background-color: #ffb5b5;
  color: red;
  top: 1vh;
}

.elem-72 {
  position: left;
  right: 28vw;
  width: 28vw;
  height: 20vh;
  background-color: #ffb8b8;
  color: red;
  top: 1vh;
}

.elem-73 {
  position: left;
  right: 27vw;
  width: 27vw;
  height: 20vh;
  background-color: #ffbaba;
  color: red;
  top: 1vh;
}

.elem-74 {
  position: left;
  right: 26vw;
  width: 26vw;
  height: 20vh;
  background-color: #ffbdbd;
  color: red;
  top: 1vh;
}

.elem-75 {
  position: left;
  right: 25vw;
  width: 25vw;
  height: 20vh;
  background-color: #ffbfbf;
  color: red;
  top: 1vh;
}

.elem-76 {
  position: left;
  right: 24vw;
  width: 24vw;
  height: 20vh;
  background-color: #ffc2c2;
  color: red;
  top: 1vh;
}

.elem-77 {
  position: left;
  right: 23vw;
  width: 23vw;
  height: 20vh;
  background-color: #ffc4c4;
  color: red;
  top: 1vh;
}

.elem-78 {
  position: left;
  right: 22vw;
  width: 22vw;
  height: 20vh;
  background-color: #ffc7c7;
  color: red;
  top: 1vh;
}

.elem-79 {
  position: left;
  right: 21vw;
  width: 21vw;
  height: 20vh;
  background-color: #ffc9c9;
  color: red;
  top: 1vh;
}

.elem-80 {
  position: left;
  right: 20vw;
  width: 20vw;
  height: 20vh;
  background-color: #ffcccc;
  color: red;
  top: 1vh;
}

.elem-81 {
  position: left;
  right: 19vw;
  width: 19vw;
  height: 20vh;
  background-color: #ffcfcf;
  color: red;
  top: 1vh;
}

.elem-82 {
  position: left;
  right: 18vw;
  width: 18vw;
  height: 20vh;
  background-color: #ffd1d1;
  color: red;
  top: 1vh;
}

.elem-83 {
  position: left;
  right: 17vw;
  width: 17vw;
  height: 20vh;
  background-color: #ffd4d4;
  color: red;
  top: 1vh;
}

.elem-84 {
  position: left;
  right: 16vw;
  width: 16vw;
  height: 20vh;
  background-color: #ffd6d6;
  color: red;
  top: 1vh;
}

.elem-85 {
  position: left;
  right: 15vw;
  width: 15vw;
  height: 20vh;
  background-color: #ffd9d9;
  color: red;
  top: 1vh;
}

.elem-86 {
  position: left;
  right: 14vw;
  width: 14vw;
  height: 20vh;
  background-color: #ffdbdb;
  color: red;
  top: 1vh;
}

.elem-87 {
  position: left;
  right: 13vw;
  width: 13vw;
  height: 20vh;
  background-color: #ffdede;
  color: red;
  top: 1vh;
}

.elem-88 {
  position: left;
  right: 12vw;
  width: 12vw;
  height: 20vh;
  background-color: #ffe0e0;
  color: red;
  top: 1vh;
}

.elem-89 {
  position: left;
  right: 11vw;
  width: 11vw;
  height: 20vh;
  background-color: #ffe3e3;
  color: red;
  top: 1vh;
}

.elem-90 {
  position: left;
  right: 10vw;
  width: 10vw;
  height: 20vh;
  background-color: #ffe5e5;
  color: red;
  top: 1vh;
}

.elem-91 {
  position: left;
  right: 9vw;
  width: 9vw;
  height: 20vh;
  background-color: #ffe8e8;
  color: red;
  top: 1vh;
}

.elem-92 {
  position: left;
  right: 8vw;
  width: 8vw;
  height: 20vh;
  background-color: #ffebeb;
  color: red;
  top: 1vh;
}

.elem-93 {
  position: left;
  right: 7vw;
  width: 7vw;
  height: 20vh;
  background-color: #ffeded;
  color: red;
  top: 1vh;
}

.elem-94 {
  position: left;
  right: 6vw;
  width: 6vw;
  height: 20vh;
  background-color: #fff0f0;
  color: red;
  top: 1vh;
}

.elem-95 {
  position: left;
  right: 5vw;
  width: 5vw;
  height: 20vh;
  background-color: #fff2f2;
  color: red;
  top: 1vh;
}

.elem-96 {
  position: left;
  right: 4vw;
  width: 4vw;
  height: 20vh;
  background-color: #fff5f5;
  color: red;
  top: 1vh;
}

.elem-97 {
  position: left;
  right: 3vw;
  width: 3vw;
  height: 20vh;
  background-color: #fff7f7;
  color: red;
  top: 1vh;
}

.elem-98 {
  position: left;
  right: 2vw;
  width: 2vw;
  height: 20vh;
  background-color: snow;
  color: red;
  top: 1vh;
}

.elem-99 {
  position: left;
  right: 1vw;
  width: 1vw;
  height: 20vh;
  background-color: #fffcfc;
  color: red;
  top: 1vh;
}

.elem-100 {
  position: left;
  right: 0vw;
  width: 0vw;
  height: 20vh;
  background-color: white;
  color: red;
  top: 1vh;
}

SassMeister-rendered.html

<div class="elem-1"></div>
<div class="elem-2"></div>
<div class="elem-3"></div>
<div class="elem-4"></div>
<div class="elem-5"></div>
<div class="elem-6"></div>
<div class="elem-7"></div>
<div class="elem-8"></div>
<div class="elem-9"></div>
<div class="elem-10"></div>
<div class="elem-11"></div>
<div class="elem-12"></div>
<div class="elem-13"></div>
<div class="elem-14"></div>
<div class="elem-15"></div>
<div class="elem-16"></div>
<div class="elem-17"></div>
<div class="elem-18"></div>
<div class="elem-19"></div>
<div class="elem-20"></div>
<div class="elem-21"></div>
<div class="elem-22"></div>
<div class="elem-23"></div>
<div class="elem-24"></div>
<div class="elem-25"></div>
<div class="elem-26"></div>
<div class="elem-27"></div>
<div class="elem-28"></div>
<div class="elem-29"></div>
<div class="elem-30"></div>
<div class="elem-31"></div>
<div class="elem-32"></div>
<div class="elem-33"></div>
<div class="elem-34"></div>
<div class="elem-35"></div>
<div class="elem-36"></div>
<div class="elem-37"></div>
<div class="elem-38"></div>
<div class="elem-39"></div>
<div class="elem-40"></div>
<div class="elem-41"></div>
<div class="elem-42"></div>
<div class="elem-43"></div>
<div class="elem-44"></div>
<div class="elem-45"></div>
<div class="elem-46"></div>
<div class="elem-47"></div>
<div class="elem-48"></div>
<div class="elem-49"></div>
<div class="elem-50"></div>
<div class="elem-51"></div>
<div class="elem-52"></div>
<div class="elem-53"></div>
<div class="elem-54"></div>
<div class="elem-55"></div>
<div class="elem-56"></div>
<div class="elem-57"></div>
<div class="elem-58"></div>
<div class="elem-59"></div>
<div class="elem-60"></div>
<div class="elem-61"></div>
<div class="elem-62"></div>
<div class="elem-63"></div>
<div class="elem-64"></div>
<div class="elem-65"></div>
<div class="elem-66"></div>
<div class="elem-67"></div>
<div class="elem-68"></div>
<div class="elem-69"></div>
<div class="elem-70"></div>
<div class="elem-71"></div>
<div class="elem-72"></div>
<div class="elem-73"></div>
<div class="elem-74"></div>
<div class="elem-75"></div>
<div class="elem-76"></div>
<div class="elem-77"></div>
<div class="elem-78"></div>
<div class="elem-79"></div>
<div class="elem-80"></div>
<div class="elem-81"></div>
<div class="elem-82"></div>
<div class="elem-83"></div>
<div class="elem-84"></div>
<div class="elem-85"></div>
<div class="elem-86"></div>
<div class="elem-87"></div>
<div class="elem-88"></div>
<div class="elem-89"></div>
<div class="elem-90"></div>
<div class="elem-91"></div>
<div class="elem-92"></div>
<div class="elem-93"></div>
<div class="elem-94"></div>
<div class="elem-95"></div>
<div class="elem-96"></div>
<div class="elem-97"></div>
<div class="elem-98"></div>
<div class="elem-99"></div>
<div class="elem-100"></div>