scss @each相邻的兄弟姐妹

Question

我一直想知道这是否可以用sass完成。

使用@each或@for，重复相邻的选择器以计算我选择的数量。

所以输出是

.class{
    opacity: 1;

    & + .class{
        opacity: 0.8;

        & + .class{
            opacity: 0.6;

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

可以这样做吗？

Answer 1

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

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