SCSS - 在循环中添加变量[重复]

【问题标题】：SCSS - adding variables in a loop [duplicate]SCSS - 在循环中添加变量[重复]
【发布时间】：2015-10-26 12:50:54
【问题描述】：

在下面的代码块中，我必须写 6 次才能将 $blue 更改为不同的颜色。必须有一种更简单、更 DRY 的方式来编写此代码。

&:nth-child(1) {
  .fa-stack-1x { color: $white; }
  .fa-circle { color: $blue; }
  hr {
    background: $blue;
    background-image: linear-gradient(to right, $white, $blue, $white);
  }
  &:hover {
    background: $blue;
    .fa-stack-1x { color: $blue; }
    .fa-circle { color: $white; }
     a { 
       background-color: $white; 
       color: $blue; 
     }
     hr {
       background: $white;
       background-image: linear-gradient(to right, $blue, $white, $blue);
     }
  }
}

【问题讨论】：

标签： sass

【解决方案1】：

所以，原来它很容易，下面解决了这个问题

$colours-list: $blue, $burgundy, $green, $orange, $purple, $red;
@each $current-colour in $colours-list { 
  $i: index($colours-list, $current-colour);
    &:nth-child(#{$i}) {
      .fa-stack-1x { color: $white; }
      .fa-circle { color: $current-colour; }
      hr {
        background: $current-colour;
        background-image: linear-gradient(to right, $white, $current-colour, $white);
      }
      a { background: $current-colour; color: $white; }
      &:hover {
        background: $current-colour;
        .fa-stack-1x { color: $current-colour; }
        .fa-circle { color: $white; }
        a { 
          background-colour: $white; 
          color: $current-colour; 
        }
        hr {
          background: $white;
          background-image: linear-gradient(to right, $current-colour, $white, $current-colour);
        }
      }
    }
  }

【讨论】：