scss color shade funtion

_color-shade.scss

// color shade function
// @link http://www.colorhexa.com/

$shade-step: 100% / 13;

@function x-color-shade($target-color, $steps: 0) {
  $lightness: $shade-step * $steps;
  $return-color: null;

  @if $lightness > 0 {
    $return-color: lighten($target-color, $lightness);
  } @else if $lightness < 0 {
    $return-color: darken($target-color, $lightness * -1);
  } @else {
    $return-color: $target-color;
  }

  @return $return-color;
}

// Test
/*
 * base color: #09c
 */
/*
 * Result
 * @link http://sassmeister.com/gist/4632140
 * @link http://www.colorhexa.com/0099cc
 */

$base-color: #09c;

/* x-color-shade() の第二引数に 1 ～ 9 を指定 */
@for $i from 1 through 9 {
  .lighten-#{$i} { color: x-color-shade($base-color, $i); }
}

/* x-color-shade() の第二引数に 0 を指定 */
.shade-0 { color: x-color-shade($base-color, 0); }

/* x-color-shade() の第二引数に何も指定しない */
.shade-null { color: x-color-shade($base-color); }

/* x-color-shade() の第二引数に -1 ～ -9 を指定 */
@for $i from 1 through 9 {
  .darken-#{$i} { color: x-color-shade($base-color, $i * -1); }
}