SCSS - 在循环中添加变量

Question

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

&: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);
     }
  }
}

Answer 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);
        }
      }
    }
  }