How to change border-color for each subsequent element?

Question

css

There is a list of elements with

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

Is it possible to make sure that for each next element, the color of the border is unique? For example, it got darker.

<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>

The idea is that with each new ".upcoming-events-item" block, I make the border color darker and overwrite it in the "$upcoming-event-border-color" variable. Overwriting does not occur, the color changes once.

$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;
}

An example in the sandbox
codepen.io/anon/pen/BLKARR
You can solve the problem with JS, but it's more interesting with Sass.

Answer 1

The overwriting does not occur due to the fact that the variables are in different scopes.
In your case, you need to use the
https://webref.ru/layout/sass/for loop