SASS detecta la oscuridad del color para determinar los estilos.
Estoy tratando de crear un mixin que pueda detectar si mostrar un texto oscuro (si el color pasado a buttonStyles es claro) o un texto claro (para colores más oscuros). Recuerdo que había una forma de hacerlo con LESS y me preguntaba si hay una forma en SASS.
Considera este SCSS:
$white: #fff;
$text: #393939;
$font-std: 18px;
$transition-std: 0.4s ease all;
$primary: #f8e421;
$secondary: #354052;
@mixin buttonStyles($color) {
font-size: $font-std;
color: $text;
padding: 1rem 3rem;
background-color: $color;
color: $white;
transition: $transition-std;
&:hover {
cursor: pointer;
background-color: lighten($color, 15%);
}
&:focus {
background-color: lighten($color, 10%);
}
&:active {
background-color: lighten($color, 25%);
}
}
.btnPrimary {
@include buttonStyles($primary);
}
.btnSecondary {
@include buttonStyles($secondary);
}
Y este html:
<button class='btnSecondary'>secondary</button>
<button class='btnPrimary'>primary</button>
El botón secundario es mucho más legible que el botón primario. Sé que podría pasar un segundo argumento que establezca el color del texto, pero me preguntaba si hay una forma más limpia y automática como en LESS (desafortunadamente no recuerdo cómo se hacía con LESS).
Demo en vivo: https://jsfiddle.net/3v0ckeq9/5/
Gracias.
EDIT:
He agregado esta función que casi parece funcionar:
@function lightOrDark($color) {
$result: red;
@if (blackness($color) == 50) {
$result: green;
}
@return $result;
}
Pero el problema es que SASS se queja al tratar de determinar si el color es mayor de 50 (o menor) pero está bien con ==. Solo quiero poder determinar si el color proporcionado es oscuro o claro para poder aplicar el color correcto del texto.
Parece que debería haber opciones para determinar la oscuridad o claridad aquí: https://sass-lang.com/documentation/modules/color#grayscale
Se aceptan soluciones alternativas.
davy.ai
Para determinar automáticamente si mostrar texto claro o oscuro en función del color de fondo pasado, se puede utilizar la función
lightnessen SASS. Aquí tienes un ejemplo de mixin que establecerá el color del texto en blanco para fondos oscuros y en negro para fondos claros:Dentro del mixin, reemplazamos el color de texto
$whitecodificado en duro con un operador ternario que verifica la luminosidad de la variable$color. Si la luminosidad es mayor a 50, establece el color de texto en$text(que es negro o un color gris oscuro, según tus variables), y si es menor o igual a 50, establece el color de texto en$white.Esto debería darte el cambio automático de color de texto que estás buscando, sin necesidad de pasar un argumento separado.