css - selectors - Sass y selector de niños combinados

sass sibling selector

Question

Acabo de descubrir a Sass, y he estado muy emocionado al respecto.

Por cierto, en mi sitio web implemento un menú de navegación similar a un árbol, diseñado con el selector infantil combinado ( E > F ).

¿Hay alguna forma de volver a escribir este código en una sintaxis más simple (o mejor) en Sass?

#foo > ul > li > ul > li > a {
color: red;
}

Answer 1

Para esa única regla que tienes, no hay una forma más corta de hacerlo. El combinador de niños es el mismo en CSS y en Sass / SCSS y no hay alternativa.

Sin embargo, si tuviera varias reglas como esta:

#foo > ul > li > ul > li > a:nth-child(3n+1) {
color: red;
}
#foo > ul > li > ul > li > a:nth-child(3n+2) {
color: green;
}
#foo > ul > li > ul > li > a:nth-child(3n+3) {
color: blue;
}

Puede condensarlos a uno de los siguientes:

/* Sass */
#foo > ul > li > ul > li
> a:nth-child(3n+1)
color: red
> a:nth-child(3n+2)
color: green
> a:nth-child(3n+3)
color: blue
/* SCSS */
#foo > ul > li > ul > li {
> a:nth-child(3n+1) { color: red; }
> a:nth-child(3n+2) { color: green; }
> a:nth-child(3n+3) { color: blue; }
}

Answer 2

Sin el selector combinado de niños, probablemente harías algo similar a esto:

foo {
bar {
baz {
color: red;
}
}
}

Si quieres reproducir la misma sintaxis con > , puedes hacer esto:

foo {
> bar {
> baz {
color: red;
}
}
}

Esto compila a esto:

foo > bar > baz {
color: red;
}

O en sass:

foo
> bar
> baz
color: red