create styleguide blocks

gistfile1.sass

// Return the hex value of tint/shade
@function colorToString($color, $int) {

  $output: $color;

  @if $int == 0 {
    $output: base  + ' - ' + $color;
  }

  @return "" + $output + "";

}

// Tint on iteration
@for $i from 0 through 10 {
  .tint-grey-#{$i * 10} {
    background-color: tint($grey, $i * 10);

    &:before {
      content: '#{$i * 10}';
      color: invert(tint($grey, $i * 10));
    }

    &:after {
      content: colorToString(tint($grey, $i * 10), $i);
    }
  }
}

// A generated example
.tint-grey-10 {
    background-color: #333;

    &:before {
        content: '10'; // how much tint out of 100
        color: #999;
    }

    &:after {
        content: '#333'; /// the colour that is generated so it is easily seen
    }
}