現在の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);
}