SASS / S CSS Изменение имени свойства в цикле for

Question

Я пытаюсь выучить S CSS и, хотя я понимаю, как циклы можно использовать для присваивания свойствам различных значений, возможно ли их использовать для создания разных свойств?

Я при попытке создать сайт, который будет иметь 4 деления,

<div id="divContainer">
  <div><div>
  <div><div>
  <div><div>
  <div><div>
</div>

, каждый из которых расположен относительно другого угла своего родителя, а сам css будет выглядеть так:

.divContainer:nth-child(1) {
  position: absolute;
  left: 20px;
  top: 20px;
}

.divContainer:nth-child(2) {
  position: absolute;
  top: 20px;
  right: 20px;
}

.divContainer:nth-child(3) {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.divContainer:nth-child(4) {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

Я попытался определить список этих сторон, а затем использовать функцию nth для определения имен свойств, которая не работает:

$sides: ('top', 'right', 'bottom', 'left', 'top');

@for $i from 1 through 4 {
  .divContainer:nth-child(#{$i}) {
    position: absolute;
    nth($sides, $i): 20px;
    nth($sides, $i+1): 20px;
  }
}

Я не нашел упоминаний о такой возможности в документах SASS, поэтому любая помощь или объяснение будет с благодарностью.

PS Это первый раз, когда я задаю вопрос по stackoverflow, если я что-то сделал неправильно, не стесняйтесь просветить меня.

Answer 1

Вы были почти там, вы просто забыли обернуть сгенерированные имена свойств #{...} для строковой интерполяции :

$sides: ('top', 'right', 'bottom', 'left', 'top');

@for $i from 1 through 4 {
  .divContainer:nth-child(#{$i}) {
    position: absolute;
    #{nth($sides, $i)}: 20px;
    #{nth($sides, $i+1)}: 20px;
  }
}