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 ?.
$color
, recorre una lista de elementos llamada$colors
con una iteracion@each
de Sass.