求助 | scss each 插值和变量

Question

$baidu-color: #3385ff;
$bing-color: #0c8484;

@each $source in baidu, bing {
  .#{$source} {
    .el-input-group__append,
    input {
      border-color: #{'$'}#{$source}-color; //css -> $baidu-color
      &:hover {
        border-color: #{$source}-color; // css -> baidu-color
      }
    }
    .el-icon-search {
      color: #{$source}-color;
      &:hover {
        border-color: #{$source}-color;
      }
    }
  }
}

求教，如上代码，如何将颜色编译出来呢？谢谢！

Answer 1

$baidu-color: #3385ff;
$bing-color: #0c8484;

@each $source, $color in (baidu, $baidu-color), (bing,$bing-color) {
  .#{$source} {
    .el-input-group__append,
    input {
      border-color: $color; //css -> $baidu-color
      &:hover {
        border-color: $color; // css -> baidu-color
      }
    }
    .el-icon-search {
      color: $color;
      &:hover {
        border-color: $color;
      }
    }
  }
}