Как изменить border-color для каждого последующего элемента?

Question

[Ler Den]

Есть список элементов с

border-left: 4px solid $upcoming-event-border-color;

Возможно ли сделать так, чтобы для каждого следующего элемента, цвет бордера был уникальным? Например, ставал темнее.

<div class="upcoming-events-item">
    <h4>May require custom widths</h4>
    <h6>15.09.2016</h6>
    <p>Inputs and selects have so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.
    </p>
  </div>
  <div class="upcoming-events-item">
    <h4>May require custom widths</h4>
    <h6>15.09.2016</h6>
    <p>Inputs and selects have so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.
    </p>
  </div>
  <div class="upcoming-events-item">
    <h4>May require custom widths</h4>
    <h6>15.09.2016</h6>
    <p>Inputs and selects have so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.
    </p>
  </div>

Идея такова, что с каждым новым блоком ".upcoming-events-item" я делаю цвет границы темнее и перезаписываю в переменную "$upcoming-event-border-color". Перезаписывание не происходит, цвет меняется единожды.

$upcoming-event-border-color: hsl(10, 83, 94);
.upcoming-events-item:nth-child(1n) {
  $upcoming-event-border-color: darken( $upcoming-event-border-color, 10%);
  border-color: $upcoming-event-border-color;
}

.upcoming-events-item {
  border-left: 4px solid $upcoming-event-border-color;
  padding: 0px 10px;
  margin: 20px 5px;
}

Пример в песочнице
codepen.io/anon/pen/BLKARR
Можно решить проблему средствами JS, но интереснее на Sass.

Answer 1

[Alex]

Перезапись не происходит из-за того, что переменные находятся в разных областях видимости.
В вашем же случае нужно использовать цикл
https://webref.ru/layout/sass/for