splincodewd
@splincodewd
Developer

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

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

Вот 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; // ошибка синтаксиса
}
  • Вопрос задан
  • 160 просмотров
Пригласить эксперта
Ответы на вопрос 1
splincodewd
@splincodewd Автор вопроса
Developer
$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)"};
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы