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