sass color alternativo en elementos anidados subsiguientes
Supongamos que quiero alternar el color de fondo de un div si está anidado dentro de otro div del mismo nombre de clase.
Ejemplo:
.my-div {
background-color: white;
.my-div {
background-color: grey;
.my-div {
background-color: white;
.my-div {
background-color: grey;
.my-div {
background-color: white;
.my-div {
background-color: grey;
.my-div {
background-color: white;
.my-div {
background-color: grey;
}
}
}
}
}
}
}
}
¿Hay alguna manera de lograr esto de manera menos verbosa, digamos hasta 8 niveles, con un bucle Sass u otra función?
davy.ai
Sí, se puede utilizar un bucle Sass para lograr esto. Aquí hay un ejemplo:
scss
@for $i from 1 through 8 {
.mi-div:nth-child(#{$i}) {
background-color: if(($i % 2) == 0, white, grey);
}
}