<h1>Life is very charming.</h1>

/// Stripe builder
/// @author Hugo Giraudel
/// @param {Direction} $direction - Gradient direction
/// @param {List} $colors - List of colors
/// @output `background-image` if several colors, `background-color` if only one
@mixin stripes($direction, $colors) {
  $length: length($colors);
  
  @if $length > 1 {
    $stripes: ();
    
    @for $i from 1 through $length {
      $stripe: (100% / $length) * ($i - 1);
      
      @if $i > 1 {
        $previous-color: nth($colors, $i - 1);
        $stripes: append($stripes, $previous-color $stripe, comma);
      }
      
      $stripes: append($stripes, nth($colors, $i) $stripe, comma);
    }
    background: linear-gradient($direction, $stripes) fixed;
  } @else if $length == 1 {
    background-color: $colors;
  }
}

/* 必要箇所でmixinの呼び出し */
body {
  @include stripes(to right, #80B9AA #FFFBD2 #FFD1B7 #FF8688 #7D5C68);
  padding: 200px 0;
}

h1 {
  font-family: 'Sansita', sans-serif;
  color: #7D5C68;
  font-size: 3rem;
  text-align: center;
}