Sass 每个相邻兄弟姐妹的scss

我一直想知道这是否可以通过sass实现

使用@each或@for，重复相邻的选择器，计算我选择的内容

所以输出是

.class{
    opacity: 1;

    & + .class{
        opacity: 0.8;

        & + .class{
            opacity: 0.6;

            & + .class{
                opacity: 0.4;
            }
        }
    }
}

---

可以这样做吗？

您需要的是一个相当简单的循环来生成所需的选择器：

$opacity: 1, .8, .6, .4;
$sel: '';
@each $o in $opacity {
    $sel: if($sel == '', '.class', $sel + ' + .class');
    #{$sel} {
        opacity: $o;
    }
}

或者：

$siblings: 4;
$step: .2;
$class: '.class';
$sel: '';
@for $i from 0 to $siblings {
    $sel: if($sel == '', '.class', $sel + ' + .class');
    #{$sel} {
        opacity: 1 - (1 * ($step * $i));
    }
}

---

好极了我想你的选择就是我要找的。能够定义所有内容，以便其他人更容易理解。