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