Sass y selector de niño combinado

126

Acabo de descubrir a Sass y estoy muy entusiasmado con eso.

En mi sitio web, implemento un menú de navegación en forma de árbol, diseñado con el combinador secundario ( E > F).

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

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

css css-selectors sass

— Frarees
fuente

Creo que "OP más simple / mejor" significa "de una manera que usa espacios en blanco para indicar jerarquía"

— jsejcksn

Respuestas:

223

Sin el selector secundario combinado, probablemente haría algo similar a esto:

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

Si desea reproducir la misma sintaxis >, puede hacer esto:

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

Esto compila a esto:

foo > bar > baz {
  color: red;
}

O en sass:

foo
  > bar
    > baz
      color: red

— Arnaud Le Blanc
fuente

Esto solo lo hará más largo, ¿no?

— BoltClock

Pensé que esto es lo que OP quiere

— Arnaud Le Blanc

genial gracias. por cierto, como dijo BoltClock, es más largo (y de alguna manera más feo para mí). Parece que tendré que quedarme con mi viejo estilo.

— Frarees

necesita definir "sintaxis más agradable";)

— Arnaud Le Blanc

Para esa única regla que tienes, no hay una forma más corta de hacerlo. El combinador secundario es el mismo en CSS y en Sass / SCSS y no hay otra 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 en 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; }
}

— BoltClock
fuente

Entonces, no hay transformación para el selector secundario combinado ... ¿tal vez alguna alternativa?

— Frarees