A CodePen by renancouto. 50 Shades of Gray - Just a quick experiment with SCSS's while loop.

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<h1>50 Shades of Gray</h1>

script.js

var i = 0, m = '', c;
for (i; i < 50; i++) {
  c = i + 1;
  m += '<span class="shade-' + c + '">' + c + '</span>';
}
$('body').append(m);

style.scss

@import "compass";
body {
  font: 14px Arial;
  padding: 20px;
}

h1 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
}

span {
  border: 1px solid #fff;
  float: left;
  padding: 15px 0;
  width: 65px;
  text-align: center;
  text-shadow: rgba(255,255,255,.2) 0 1px 0;
  
  &:after {
    display: block;
    font-size: 11px;
  }
}

$i: 50;
@while $i > 0 {
  .shade-#{$i} {
    $c: darken(#fff, $i);
    background: $c;
    &:after { content: '#{$c}'; }
  }
  $i: $i - 1;
}