Вызовите разные переменные цвета в цикле в Sass

Question

У меня есть 20 разных кнопок на моей странице (класс buttonCareCenter) и 10 разных цветов для его фона.

Вместо 10 раз:

   &:nth-child(10n + x) {
      .btn.btn-primary {
          background-color: #xxxxxx;
       }
   }

Я хотел бы найти способ использовать цикл @for с nth-child, чтобы установить правильные цвета для моих кнопок.Но кажется, что

#{$color-$i};

- это не правильный способ вызывать мои разные переменные.

$color-0: #ff5722;
$color-1: #ff4514;
$color-2: #647c8a;
$color-3: #3f51b5;
$color-4: #2196f3;
$color-5: #00b862;
$color-6: #afdf0a;
$color-7: #a7b61a;
$color-8: #f3e562;
$color-9: #ff9800;

.all-buttonCareCenter{
        @for $i from 0 through 9 {
            &:nth-child(10n + #{$i}) {
                .btn.btn-primary {
                    background-color: #{$color-$i};
                }
            }
        }

        .buttonCareCenter{
           height: $button-height;             
           border: 0;
           box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
        }
}

Есть идеи?

Answer 1

Вы можете решить эту проблему, добавив все цвета в другую переменную с именем $colors и пройдя по ней.Гораздо проще поддерживать, если один из цветов изменится.

$button-height: 20px;

$color-0: #ff5722;
$color-1: #ff4514;
$color-2: #647c8a;
$color-3: #3f51b5;
$color-4: #2196f3;
$color-5: #00b862;
$color-6: #afdf0a;
$color-7: #a7b61a;
$color-8: #f3e562;
$color-9: #ff9800;

$colors: $color-0, $color-1, $color-2, $color-3, $color-4, $color-5, $color-6,
  $color-7, $color-8, $color-9;

.all-buttonCareCenter {
  @for $i from 1 through length($colors) {
    &:nth-child(#{length($colors)}n+#{$i}) {
      .btn.btn-primary {
        background-color: nth($colors, $i); 
      }
    }
  }
  .buttonCareCenter {
    height: $button-height;
    border: 0;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
  }
}

Посмотрите этот Пример CodePen Я создал, щелкните справа вверху » Просмотр скомпилированного CSS для просмотраскомпилированный код со всеми итерациями.

Answer 2

Другое решение, которое я нашел:

%color-0 {
    background-color: #ff5722;
}
%color-1{
    background-color: #ff4514;
}
%color-2 {
   background-color: #647c8a;
}
%color-3{
   background-color: #3f51b5;
}
%color-4 {
   background-color: #2196f3;
}
%color-5{
   background-color: #00b862;
}
%color-6 {
   background-color: #afdf0a;
}
%color-7{
   background-color: #a7b61a;
}
%color-8 {
   background-color: #f3e562;
}
%color-9{
   background-color: #ff9800;
}

@for $i from 0 through 9 {
    &:nth-child(10n + #{$i}) {
        .btn.btn-primary {
             @extend %color-#{$i};
         }
    }
}