sass: primer hijo no funciona

Question

No he usado SASS durante mucho tiempo y quería saber si hay algunos problemas con pseudo-elementos como :first-child o :last-child?

Answer 1

Si bien @Andre tiene razón en que existen problemas con los pseudo elementos y su compatibilidad, especialmente en los navegadores antiguos (IE), ese soporte mejora constantemente.

En cuanto a su pregunta, si hay algún problema, diría que realmente no he visto ninguno, aunque la sintaxis para el pseudo-elemento puede ser un poco complicado, especialmente cuando primero lo susto. Por lo tanto:

div#top-level 
    declarations: ... 
    div.inside 
    declarations: ... 
    &:first-child 
     declarations: ... 

que recoge como uno esperaría:

div#top-level{ 
    declarations... } 
div#top-level div.inside { 
    declarations... } 
div#top-level div.inside:first-child { 
    declarations... } 

no he visto ninguna documentación sobre nada de esto, salvo por la afirmación de que "Sass puede hacer todo lo que puede hacer css. " Como siempre, con Haml y SASS, la sangría es todo.

Answer 2

En primer lugar, todavía hay navegadores que no son compatibles con esos pseudo-elementos (es decir: first-child,: last-child), por lo que debe 'tratar' este problema.

No es un buen ejemplo de cómo hacer que el trabajo sin necesidad de utilizar pseudo-elementos:

http://www.darowski.com/tracesofinspiration/2010/01/11/this-newbies-first-impressions-of-haml-and-sass/

              - ver el ejemplo de tubo separador.

Espero que haya sido útil.

Answer 3

Creo que es mejor (para mi expirience) para utilizar: :first-of-type, :nth-of-type(), :last-of-type. Se puede hacer con un pequeño cambio de reglas, pero pude hacer mucho más que *-of-type, que *-child selectores.