Sélecteur enfant Sass et combiné

126

Je viens de découvrir Sass et j'en ai été tellement excité.

Dans mon site Web, j'implémente un menu de navigation en forme d'arbre, conçu à l'aide du combinateur enfant ( E > F).

Y a-t-il un moyen de réécrire ce code avec une syntaxe plus simple (ou meilleure) dans Sass?

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

css css-selectors sass

— frarees
source

Je pense que par "plus simple / meilleur" OP signifie "d'une manière qui utilise des espaces pour indiquer la hiérarchie"

— jsejcksn

Réponses:

223

Sans le sélecteur d'enfant combiné, vous feriez probablement quelque chose de similaire à ceci:

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

Si vous souhaitez reproduire la même syntaxe avec >, vous pouvez faire ceci:

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

Cela compile à ceci:

foo > bar > baz {
  color: red;
}

Ou dans le sass:

foo
  > bar
    > baz
      color: red

— Arnaud Le Blanc
source

Cela va juste le prolonger, n'est-ce pas?

— BoltClock

Je pensais que c'était ce que voulait OP

— Arnaud Le Blanc

gentil, merci. btw, comme l'a déclaré BoltClock, est plus long (et en quelque sorte plus laid pour moi). On dirait que je vais devoir rester avec mon ancien style.

— frarees

il faut définir une "syntaxe plus agréable";)

— Arnaud Le Blanc

Pour cette règle unique que vous avez, il n'y a pas de moyen plus court de le faire. Le combinateur enfant est le même en CSS et en Sass / SCSS et il n'y a pas d'alternative.

Cependant, si vous aviez plusieurs règles comme celle-ci:

#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;
}

Vous pouvez les condenser en l'un des éléments suivants:

/* 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
source

Il n'y a donc pas de transformation pour le sélecteur d'enfant combiné ... peut-être des alternatives?

— frarees