如何使用类似于 :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 属性。

如何使用类似于 :nth-child(n) 伪选择器的元素+元素创建 SCSS 循环？

How to create a SCSS loop with element+element similar to :nth-child(n) pseudo selector?

sass

compass-sass