1

necesito ayuda, y saber si se puede o no hacer lo siguiente.

Estoy aprendiendo a usar Sass (SCSS), y estoy intentando hacer que el texto de un boton cambie, de acuerdo al color de fondo.

La idea es que si el color de fondo es un color oscuro, el color del texto sea un color claro, en su defecto blanco, y si el color de fondo es claro, el color del texto sea un color oscuro, en su defecto negro.

Hasta el momento tengo este codigo, pero no se si lo estoy haciendo mal, por que el Sass si se esta compilando sin generar ninguna error, pero no se reflejan los cambios.

$colors: black, white, blue, red, green, yellow, orange;

@each $color in $colors {
  .btn-#{$color} {
    background: $color;
    padding: 10px 30px;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    @if $color == lighten {
      color: #000;
    } @else {
      color: #fff;
    }
  }
}

Estoy usando un ciclo @each y una condicional @if.

Alguien me puede confirmar o ayudar ?.

1
  • Bueno en ese caso, si te fijas la variable $color, recorre una lista de elementos llamada $colors con una iteracion @each de Sass.
    – coreDeiv
    Commented el 22 jun. 2020 a las 4:45

1 respuesta 1

1

Tendrías que jugar un poco con las opciones de sass:color.

Una opción es leer el lightness del color y a partir de eso devolver una cosa u otra:

@function color-texto($color) {
  @if (lightness($color) > 50) {
    @return black;
  } @else {
    @return white;
  }
}

$colors: black, white, blue, red, green, yellow, orange;

@each $color in $colors {
  .btn-#{$color} {
    background: $color;
    padding: 10px 30px;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    color: color-texto($color);
  }
}
1
  • Excelente, compa, no lo había pensado, pero me funciono, muchas gracias.
    – coreDeiv
    Commented el 22 jun. 2020 a las 5:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.