0

現在のcolorcontrast関数は 3 色のみを比較します。@function colorcontrast($color, $rest...) {forのような複数のパラメーターを使用して構築するための最適なソリューションを探していますcolor: colorcontrast(yellow, blue, orange, tomato, deekskyblue);が、リストされているすべての色と比較する方法がわかりません。

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

1 に答える 1