How to generate nesting in Sass?

Question

Sass

I just read into the cycles, but I'm already stagnant
Here is the css code

.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
}

..

It needs to be automated and in Sass up to 7 levels of nesting make
Colors in theory, you need to shift according to the RGB model, that is, the parent block is the darkest,
the child ones are the lightest
jsfiddle.net/3p3s9moz
Tried to use SASS like this, but it didn’t work out
how to concatenate variables in a loop?

$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

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