Sass - Wiederholungscode, wie kann ich das prägnanter machen

Question

Ich erstelle Hilfsklassen, die die Farbe in vordefinierte Variablen ändern. In den meisten Fällen ist der Code derselbe. Ich werde spezifischere Selektoren hinzufügen, wie kann ich das einfacher machen?

.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

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

verwenden könnte

Answer 2

Ich habe es zu einem mixin kondensiert:

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