在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};
         }
    }
}