Wie man Sass Farbvergleichsfunktion mit mehreren Parametern machen kann?

Question

Die aktuelle colorcontrast Funktion vergleicht nur mit drei Farben. Suche nach der besten Lösung, um mit mehreren Parametern wie @function colorcontrast($color, $rest...) { für color: colorcontrast(yellow, blue, orange, tomato, deekskyblue); zu bauen, aber nicht sicher, wie man mit allen aufgelisteten Farben vergleicht.

@function brightness($color) { 
    @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114))/255 * 100%; 
} 
@function colorcontrast($color, $dark, $light) { 
    $color-brightness: brightness($color); 
    $light-text-brightness: brightness($light); 
    $dark-text-brightness: brightness($dark); 
    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark); 
} 

.my-div{ 
    padding: 1rem; 
    background-color: yellow; 
    color: colorcontrast(yellow, #000, #fff); 
} 

Answer 1

Alles, was Sie brauchen, ist die Berechnung der Kontraste für alle Farben der Liste in einer Schleife. Und wählen Sie eine Farbe mit dem besten Kontrast zur Grundfarbe.

@function brightness($color) { 
    @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114))/255 * 100%; 
} 

@function color-contrast($base-color, $colors...) { 
    // $colors... - means variadic arguments as Chris W says 

    // Suppose that the best color is the first in the colors list 
    $best-color: nth($colors, 1); 
    $best-color-brightness: brightness($best-color); 

    $base-color-brightness: brightness($base-color); 

    @each $color in $colors { 
     $color-brightness: brightness($color); 

     // If the new color ($color) is more contrast than the previous one, 
     // remember it as the $best-color 
     @if(abs($base-color-brightness - $color-brightness) > abs($base-color-brightness - $best-color-brightness)) { 
     $best-color: $color; 
     $best-color-brightness: $color-brightness; 
     } 
    } 

    @return $best-color; 
} 

SassMeister demo.
Documentation für @each Direktive.