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