Bien, les muestro algo que ando haciendo y que funciona, sí, pero a medias
Estoy trabajando en unos botones para un sitio y estoy usando también las teorías de orientación a objetos en css (OOCSS) junto con scss para facilitarme en varias cosas y escribir código mas eficiente.
En fin, la cuestión es que, uno de los sets de menús requiere imágenes en los botones, y no exactamente imágenes que pueda usar como icon-font tipo font-awesome, sino directamente unos png personalizados.
La cuestión de todo esto es que trato de hacer la plantilla reutilizable y bajo el concepto DRY (don't repeat yourself), como dije, funciona a medias y este es el código scss de lo que he hecho:
Código CSS:
Ver original#nav-galleries{
img, a{
display: inline-block;
}
@for $i from 1 to 4 {
a:nth-child(#{$i}){
background-image: url("img/gallerie-icon-#{$i}.png");
background-repeat: no-repeat;
height: 52px;
width: 68;
}
}
li{
margin-top: 15px;
}
}
Pueden ignorar lo demás, lo importante en ese snippet es el for, el que da tres vueltas (si declaro 3 como limite solo hace dos iteraciones) y a cada elemento "a" le pone las propiedades que ahí ven, y lo importante reside en la url de la imagen, que toma el valor de $i para cambiar el nombre de la imagen (sip, cada imagen se llama gallerie-icon-1 ...2 ... 3).
Ahora, este código compila a este css:
Código CSS:
Ver original#nav-galleries a:nth-child(1) {
background-image: url("img/gallerie-icon-1.png");
background-repeat: no-repeat;
height: 52px;
width: 68; }
#nav-galleries a:nth-child(2) {
background-image: url("img/gallerie-icon-2.png");
background-repeat: no-repeat;
height: 52px;
width: 68; }
#nav-galleries a:nth-child(3) {
background-image: url("img/gallerie-icon-3.png");
background-repeat: no-repeat;
height: 52px;
width: 68; }
Hasta ahí, todo genial en teoría debería funcionar (tampoco es que sea un script muy extraño o complejo) pero, cuando abro el navegador para ver que tal va todo, me doy cuenta de que solo está aplicando un :nth-child ... el 1, y se lo aplica a todos los botones
Una imagen vale más:
En la imagen, los botones a la izquierda son los que estoy trabajando, como verán, solo toma el valor 1 de $i por mas que se haya compilado aparentemente bien al CSS ...
He hecho varias pruebas pero se sigue aplicando a todos por igual, este es el momento de empezar a idear cosas locas y probar, así que lo que sea que se les pueda ocurrir, por mas tonto que suene, me interesa saberlo
¿Me echan una mano?
Gracias a todos por adelantado.