SASS gift for Glory

glory.scss

// For Glory with ♥

$names: green, carrot, blue;
$colors: #2ecc71, #2ecc71, #3498db;
$tints: 20, 60, 80;
$shades: 20, 40, 60;

@function shade($color, $amount: 50%) {
  @if $color == transparent { $color: rgba(white, 0); }
  @return mix($color, black, $amount);
}

@function tint($color, $amount: 50%) {
  @if $color == transparent { $color: rgba(white, 0); }
  @return mix($color, white, $amount);
}

@for $i from 1 through length($names) {
  $name: nth($names, $i);
  $color: nth($colors, $i);

  .#{$name} { background-color: $color; }

  @for $j from 1 through length($tints) {
    $tint: nth($tints, $j);
    .#{$name}-tint-#{$tint} {
      background-color: tint($color, percentage($tint/100));
    }
  }

  @for $j from 1 through length($shades) {
    $shade: nth($shades, $j);
    .#{$name}-shade-#{$shade} {
      background-color: shade($color, percentage($shade/100));
    }
  }
}