[SOLUCIONADO] Problema con algunos nth-child en SCSS

[nanotime]

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:

#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:

#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.

[pzin]

Respecto al bucle, prueba a hacerlo así:

Código CSS:

@for $i from 1 through 3
 

Faltaría ver la estructura HTML. Si estás usando una lista, del tipo:

Código HTML:

<ul>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
</ul>
 

Entonces tienes que aplicar la pseudoclase a cada elemento de la lista, ya que todos los enlaces son los primeros hijos de su contenedor.

Tu selector quedaría algo como:

Código CSS:

li:nth-child(#{$i}) a
 

¿Has probado a usar la sintaxis sass en lugar de scss? Es más bonita.

[nanotime]

Ok acabo de ver la respuesta y estaba siguiendo el post por mail, ni se molestó en avisarme ._.

En fin, el bucle lo tengo en 4 porque cuando lo dejo en 3, solo hace dos iteraciones D:

Respecto a la sintaxis de sass, pues porque está en desuso al parecer y todos los frames están usando scss como tal u.u

Siguiendo con el tema, voy a probar de la manera que me comentas y te digo que tal va, a ver si así me funciona :)

[pzin]

Iniciado por nanotime

Respecto a la sintaxis de sass, pues porque está en desuso al parecer y todos los frames están usando scss como tal u.u

Nada que ver. De hecho es la primera cosa que ponen en su web:

Sass has two syntaxes. [...]
While the documentation on this site is mostly in the SCSS syntax, both syntaxes are fully supported – there is no functional difference between them. Use the syntax you prefer.

[nanotime]

Primero que nada, mil gracias, era justamente eso, no domino bien los pseudo elementos nth aún y me faltaba marcar el "a"... de nuevo, gracias

Iniciado por pzin

Nada que ver. De hecho es la primera cosa que ponen en su web:

Respecto a eso, si es así, entonces genial! haré las pruebas en otro sitio que estoy empezando a construir, una vez traté de usar sass en compass y foundation y me daba problemas foundation aunque ahora uso inuit, uno basado en pura estructura y no estilos, y no tiene nada que ver con compass así que, nada, voy a darle con sass, es mas claro y limpio.