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

【问题标题】：How to create a SCSS loop with element+element similar to :nth-child(n) pseudo selector?如何使用类似于 :nth-child(n) 伪选择器的元素+元素创建 SCSS 循环？
【发布时间】：2016-08-15 22:20:12
【问题描述】：

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

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

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

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

【问题讨论】：

标签： sass compass-sass

【解决方案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 属性添加像素。

【讨论】：

谢谢！正是我需要的！