period.scss

$theme: (
  period: 'Imsak',
  bg: #D2F2FF,
  color: #1281A2
), (
  period: 'Gunes',
  bg: #FFEBC1,
  color: #A6601E
), (
  period: 'Ogle',
  bg: #FFEDA3,
  color: #804502
), (
  period: 'Ikindi',
  bg: #FFD8BA,
  color: #8F361A
), (
  period: 'Aksam',
  bg: #8BCCFD,
  color: #073E6D
), (
  period: 'Yatsi',
  bg: #2E3B83,
  color: #BAE6FF
);

$order: (
  name: 'first',
  grow: 50,
  darken: 0,
  fontSize: 2.3em
), (
  name: 'second',
  grow: 22,
  darken: 5,
  fontSize: 1.6em
), (
  name: 'third',
  grow: 18,
  darken: 9,
  fontSize: 1.4em
), (
  name: 'fourth',
  grow: 14,
  darken: 13,
  fontSize: 1.2em
), (
  name: 'fifth',
  grow: 10,
  darken: 16,
  fontSize: 1.1em
), (
  name: 'sixth',
  grow: 6,
  darken: 18,
  fontSize: 1em
);

@for $i from 1 through length($theme) {
  $a: nth($theme, $i);
  // theme & size
  @for $j from 1 through length($order) {
    $b: nth($order, $j);
    .Times.#{map-get($a, period)} & {
      &.#{map-get($b, name)} {
        z-index: length($order) - $j;
        flex-grow: map-get($b, grow);
        background-color: desaturate(darken(map-get($a, bg), map-get($b, darken)), map-get($b, darken));
        .content {
          opacity: 1 - ($j - 1) / 10;
          font-size: map-get($b, fontSize);
        }
      }
    }
  }
}