50 Shades of Grey in SASS

FiftyShades.css

.FiftyShades > div {
  width: 100%;
  height: 30px;
}

.FiftyShades > div:nth-child(1) {
  background-color: #818181;
}

.FiftyShades > div:nth-child(2) {
  background-color: #838383;
}

.FiftyShades > div:nth-child(3) {
  background-color: #848484;
}

.FiftyShades > div:nth-child(4) {
  background-color: #858585;
}

.FiftyShades > div:nth-child(5) {
  background-color: #868686;
}

.FiftyShades > div:nth-child(6) {
  background-color: #888888;
}

.FiftyShades > div:nth-child(7) {
  background-color: #898989;
}

.FiftyShades > div:nth-child(8) {
  background-color: #8a8a8a;
}

.FiftyShades > div:nth-child(9) {
  background-color: #8b8b8b;
}

.FiftyShades > div:nth-child(10) {
  background-color: #8d8d8d;
}

.FiftyShades > div:nth-child(11) {
  background-color: #8e8e8e;
}

.FiftyShades > div:nth-child(12) {
  background-color: #8f8f8f;
}

.FiftyShades > div:nth-child(13) {
  background-color: #919191;
}

.FiftyShades > div:nth-child(14) {
  background-color: #929292;
}

.FiftyShades > div:nth-child(15) {
  background-color: #939393;
}

.FiftyShades > div:nth-child(16) {
  background-color: #949494;
}

.FiftyShades > div:nth-child(17) {
  background-color: #969696;
}

.FiftyShades > div:nth-child(18) {
  background-color: #979797;
}

.FiftyShades > div:nth-child(19) {
  background-color: #989898;
}

.FiftyShades > div:nth-child(20) {
  background-color: #9a9a9a;
}

.FiftyShades > div:nth-child(21) {
  background-color: #9b9b9b;
}

.FiftyShades > div:nth-child(22) {
  background-color: #9c9c9c;
}

.FiftyShades > div:nth-child(23) {
  background-color: #9d9d9d;
}

.FiftyShades > div:nth-child(24) {
  background-color: #9f9f9f;
}

.FiftyShades > div:nth-child(25) {
  background-color: #a0a0a0;
}

.FiftyShades > div:nth-child(26) {
  background-color: #a1a1a1;
}

.FiftyShades > div:nth-child(27) {
  background-color: #a2a2a2;
}

.FiftyShades > div:nth-child(28) {
  background-color: #a4a4a4;
}

.FiftyShades > div:nth-child(29) {
  background-color: #a5a5a5;
}

.FiftyShades > div:nth-child(30) {
  background-color: #a6a6a6;
}

.FiftyShades > div:nth-child(31) {
  background-color: #a8a8a8;
}

.FiftyShades > div:nth-child(32) {
  background-color: darkgray;
}

.FiftyShades > div:nth-child(33) {
  background-color: #aaaaaa;
}

.FiftyShades > div:nth-child(34) {
  background-color: #ababab;
}

.FiftyShades > div:nth-child(35) {
  background-color: #adadad;
}

.FiftyShades > div:nth-child(36) {
  background-color: #aeaeae;
}

.FiftyShades > div:nth-child(37) {
  background-color: #afafaf;
}

.FiftyShades > div:nth-child(38) {
  background-color: #b0b0b0;
}

.FiftyShades > div:nth-child(39) {
  background-color: #b2b2b2;
}

.FiftyShades > div:nth-child(40) {
  background-color: #b3b3b3;
}

.FiftyShades > div:nth-child(41) {
  background-color: #b4b4b4;
}

.FiftyShades > div:nth-child(42) {
  background-color: #b6b6b6;
}

.FiftyShades > div:nth-child(43) {
  background-color: #b7b7b7;
}

.FiftyShades > div:nth-child(44) {
  background-color: #b8b8b8;
}

.FiftyShades > div:nth-child(45) {
  background-color: #b9b9b9;
}

.FiftyShades > div:nth-child(46) {
  background-color: #bbbbbb;
}

.FiftyShades > div:nth-child(47) {
  background-color: #bcbcbc;
}

.FiftyShades > div:nth-child(48) {
  background-color: #bdbdbd;
}

.FiftyShades > div:nth-child(49) {
  background-color: #bebebe;
}

.FiftyShades > div:nth-child(50) {
  background-color: silver;
}

FiftyShades.scss

// ----
// libsass (v3.2.5)
// ----

// Fifty Shades of Grey in Sass
@function fiftyShadesOf($color: grey) {
  $shades: ();
  @for $i from 1 through 50 {
    $shades: append($shades, lighten($color, $i * .5%));
  }
  @return $shades;
}
$i: 1;

// Output
.FiftyShades {
  & > div {
      width:100%;
      height:30px;
  }
}

@each $shade in fiftyShadesOf(grey) {
  .FiftyShades {
    & > div {
      &:nth-child(#{$i}) {
        background-color:#{$shade};
      }
    }
  }
  $i: $i+1;
}

index.html

<div class="FiftyShades">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>