如何使用类似于：nth-​​child（n）伪选择器的元素+元素创建SCSS循环？

Question

目前我有一个从1到n循环的SCSS代码，并应用特定于该元素的属性。它看起来像这样：

@for $i from 1 through 6 {
.element:nth-child(#{$i}n) {
    position:absolute;
    left:10*$i;
    top:5*$i;
    }
}

但是，我发现我所针对的某些浏览器不支持nth-child伪元素。因此，我想使用元素+元素选择器。

如何实现与旧版浏览器可以理解的上述示例代码相同的效果？感谢。

Answer 1

Demo在sassmeister上。

Scss代码

$selector-name: '.element';
$selector: $selector-name;

@for $i from 1 through 6 {
  #{$selector} {
    position: absolute;
    left: 10 * $i;
    top: 5 * $i;
  }

  $selector: $selector + ' + ' + $selector-name;
}

编译到

.element {
  position: absolute;
  left: 10;
  top: 5;
}

.element + .element {
  position: absolute;
  left: 20;
  top: 10;
}

.element + .element + .element {
  position: absolute;
  left: 30;
  top: 15;
}

.element + .element + .element + .element {
  position: absolute;
  left: 40;
  top: 20;
}

.element + .element + .element + .element + .element {
  position: absolute;
  left: 50;
  top: 25;
}

.element + .element + .element + .element + .element + .element {
  position: absolute;
  left: 60;
  top: 30;
}

不要忘记为left和right属性添加像素。