scss 반복문

배열을 선언하고 반복문을 돌려서 $i번째 태그에 해당 인덱스 배열의 값을 주기

<style>
 $bgColor:#084de4 #21bfab #00387d #d54d84 #8a86ff #fcab53 #c666be;
 $bdColor:#0341c9 #49c7b8 #002b60 #cc3370 #7c78f4 #ed983b #b255ab;

 @for $i from 1 through length($bgColor) {
   &:nth-child(#{$i}) .on{
     background:nth($bgColor,$i);
     border-color:nth($bdColor,$i);
   }
 }
</style>

결과

<style>
 &:nth-child(1) .on{
  background:#084de4;
  border-color:#0341c9
 }
 &:nth-child(2) .on{
  background:#21bfab;
  border-color:#49c7b8
 }
 &:nth-child(3) .on{
  background:#00387d;
  border-color:#002b60
 }
 &:nth-child(4) .on{
  background:#d54d84;
  border-color:#cc3370
 }
 &:nth-child(5) .on{
  background:#8a86ff;
  border-color:#7c78f4
 }
 &:nth-child(6) .on{
  background:#fcab53;
  border-color:#ed983b
 }
 &:nth-child(7) .on{
  background:#c666be;
  border-color:#b255ab
 }
</style>