Цикл for в SCSS

colors.html

<ul class="colors">
  <li class="colors__item">1</li>
  <li class="colors__item">2</li>
  <li class="colors__item">3</li>
  <li class="colors__item">4</li>
  <li class="colors__item">5</li>
</ul>

colors.scss

$accent-1: #4f241a;
$accent-2: #7ba06f;
$accent-3: #c7c985;
$accent-4: #e5a876;
$accent-5: #e8bd9a;


$accents: (
  $accent-1,
  $accent-2,
  $accent-3,
  $accent-4,
  $accent-5
);

.colors {
  --color: (var(--global-color), red);
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  gap: 5px;
  list-style-type: none;
}

.colors__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background-color: var(--bg-color);

  @for $i from 1 through 5 {
    &:nth-child(#{$i}) {
      --bg-color: #{nth($accents, $i)};
    }
  }
}