Question

我的页面上有20个不同的按钮（类buttonCareCenter），背景有10种不同的颜色。

而不是使用10次：

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

我很想找到一种方法来使用带有nth-child的循环@for为我的按钮设置正确的颜色。但似乎

#{$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

我找到了另一种解决方案：

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

Answer 2

你可以通过在另一个名为$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 example，点击右上角»查看已编译的CSS 以查看包含所有迭代的已编译代码。

在Sass中循环调用不同的变量颜色

2 个答案: