SASS/SCSS 在 for 循环中更改属性名称

Question

我正在尝试学习 SCSS，虽然我了解如何使用循环为属性分配不同的值，但是否可以使用它们来生成不同的属性？

我正在尝试创建一个有 4 个 div 的网站，

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

我尝试定义这些边的列表，然后使用第 n 个函数来定义属性名称，这不起作用：

$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 文档中找到任何提及这种可能性的内容，因此非常感谢任何帮助或解释。

附：这是我第一次在stackoverflow上提问，如果我做错了什么，请不吝赐教。

Answer 1

你快到了，你只是忘了用#{...}为string interpolation包装生成的属性名称：

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