Sass-重复代码，如何使其更简洁

我正在创建将颜色更改为预定义变量的帮助器类。在大多数情况下，代码是相同的。我将添加更多特定的选择器，如何使其更易于维护

.fg-text {
  color: $colorText;
  button, .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select {
    color: $colorText;
    border-color: $colorText;
  }
}
.fg-foreground {
  color: $colorForeground;
  button, .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select {
    color: $colorForeground;
    border-color: $colorForeground;
  }
}
.fg-alternate {
  color: $colorAlternate;
  button, .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select {
    color: $colorAlternate;
    border-color: $colorAlternate;
  }
}
.fg-background {
  color: $colorBackground;
  button, .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select {
    color: $colorBackground;
    border-color: $colorBackground;
  }
}
.fg-highlight {
  color: $colorHighlight;
  button, .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select {
    color: $colorHighlight;
    border-color: $colorHighlight;
  }
}

---

我把它浓缩成一个混合物：

@mixin fg($name, $color) {
  .fg-#{$name} {
    color: $color;
    button, .button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    select {
      color: $color;
      border-color: $color;
    }
  }
}
@include fg(brand, $colorBrand);
@include fg(foreground, $colorForeground);
@include fg(background, $colorBackground);
@include fg(text, $colorText);
@include fg(alternate, $colorAlternate);
@include fg(highlight, $colorHighlight);

你可以用一个

---

你可以混在一起。是的，我想这很明显。我见过一些人用网格做复杂的事情，可能想得太多了。另外注意：您可以通过只在

.fg XYZ

元素上设置颜色，并使用值

currentColor

作为按钮和表单字段的颜色和边框颜色来进一步简化事情。见：

@each $name, $color in (text: $colorText, foreground: $colorForeground ...) {
  .fg-#{$name} {
    color: $color;
    button, .button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    select {
      color: $color;
      border-color: $color;
    }
  }
}