Sass - 繰り返しコード、これをもっと簡潔にするには

Question

私は定義済みの変数に色を変更するヘルパークラスを作成しています。ほとんどの場合、コードは同じです。より具体的なセレクタを追加して、これをどのように維持しやすくするのでしょうか？

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

Answer 1

あなたはミックスインを作ることができる@each directive

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

Answer 2

私はミックスインにそれを凝縮しています

@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);