Как на Sass сгенерировать вложенность?

Question

[Максим Иванов]

Только вчитался в циклы, но уже застой

Вот css код

.collapsible:nth-child(n) 
.collapsible-header {
  background: red
}

.collapsible:nth-child(n)
.collapsible:nth-child(n) 
.collapsible-header {
  background: yellow
}

.collapsible:nth-child(n)
.collapsible:nth-child(n)
.collapsible:nth-child(n)
.collapsible-header {
  background: green
}

..

Его нужно автоматизировать и в Sass до 7 уровней вложенности сделать
Цвета по идее, нужно смещать по RGB модели, то есть родительский блок самый темный,
дочерние самые светлые
jsfiddle.net/3p3s9moz

Пытался на SASS так, но не вышло
как в цикле конкатенировать переменные?

$sel: ".collapsible:nth-child(n)";
$r: 255;
$g: 248;
$b: 224;

@for $i from 1 through 7 {
#{$sel} .collapsible-header { {
  background: rgb( $r+($i*3), $g+($i*3), $b+($i*3) );
 }
 
 $sel = $sel + $sel; // ошибка синтаксиса
}

Answer 1

[metaf]

codepen.io/olgar/pen/rrBqGB

Answer 2

[Максим Иванов]

$sel: ".collapsible:nth-child(n)";
$r: 255;
$g: 248;
$b: 224;

@for $i from 0 through 7 {
 #{$sel} .collapsible-header {
  background: rgb( $r+($i*2), $g+($i*2), $b+($i*2) );
 }
 
 $sel: #{$sel} #{".collapsible:nth-child(n)"};
}