Sélecteur d'enfant immédiat en LESS

112

Est-il possible que LESS applique le sélecteur d'enfant immédiat (>) dans sa sortie?

Dans mon style.less, je veux écrire quelque chose comme:

.panel {
    ...
    > .control {
        ...
    }
}

et que MOINS génère quelque chose comme:

.panel > .control { ... }

css css-selectors less

— Dave
source

stackoverflow.com/questions/7634932/less-js-strong-nested-rules

— thirtydot

15

Fait amusant, l'extrait de votre question était déjà la bonne réponse.

— thirtydot

@thirtydot Bien sûr, sauf que cela ne fonctionne pas ... pas si vous ne supprimez pas l'espace ou n'ajoutez pas le "&". J'utilise less.js. Je ne peux pas dire avec certitude pour les autres analyseurs.

— Dave

2

Je viens de tester, et le code d' origine de votre question ne travail less.js. Voyez par vous-même: jsfiddle.net/thirtydot/vcE8t

— thirtydot

1

Oui mes excuses, cela fonctionne comme un charme avec l'espace. +1 pour vous. Je ne sais pas comment cela n'a pas fonctionné pour moi pendant des heures hier ... sinon je n'aurais pas posté la question.

— Dave

144

METTRE À JOUR

En fait, le code de la question d'origine fonctionne correctement. Vous pouvez simplement vous en tenir au >sélecteur d'enfant.

J'ai trouvé la réponse.

.panel {
    ...
    >.control {
        ...
    }
}

Notez le manque d'espace entre ">" et ".", Sinon cela ne fonctionnera pas.

— Dave
source

4

Je ne doute pas que ce soit un bogue si cela ne fonctionne pas avec un espace là-bas, à moins qu'il ne soit spécifiquement documenté.

— BoltClock

C'est juste duper l'analyseur. Il le voit comme un sélecteur unique, donc vous obtenez .panel >.control.

— Ricardo Tomasi

Je le prends comme une fonctionnalité plutôt que comme un bug. C'est beaucoup plus cohérent lorsque vous l'utilisez de cette façon par opposition au "&". Je pense que c'est un code plus clair si vous n'utilisez "&" qu'avec des pseudo-classes et non des classes enfants.

— Dave

1

C'est une fonctionnalité de CSS, qui accepte à la fois div > pet div>p. La cohérence serait toujours d'utiliser l'espace entre les sélecteurs (jetez un œil au CSS généré).

— Ricardo Tomasi

Bien sûr, mais j'étais plus préoccupé par la cohérence de l'utilisation de &.

— Dave

78

La manière officielle:

.panel {
  & > .control {
    ...
  }
}

& fait toujours référence au sélecteur actuel.

Voir http://lesscss.org/features/#features-overview-feature-nested-rules

— Ricardo Tomasi
source

1

Je pense que cela trompe également l'analyseur (comme vous l'avez ressenti pour l'autre réponse). Laisse-moi expliquer. Comme vous l'avez dit, & fait toujours référence au sélecteur (parent) actuel. Donc, tout ce qui suit devrait s'appliquer au parent. Et c'est le rôle des pseudo-classes. Les classes pour enfants immédiats sont plus proches des classes pour enfants **** que des pseudo-classes. Donc, utiliser simplement> est plus intuitif et logique.

— Dave

6

Qu'est-ce qui est plus correct selon vous? div > pou div >p? Le &combinateur est la manière canonique de le faire en MOINS, pas mes sentiments. Votre explication est réthorique. Certaines personnes écrivent leur CSS sur une seule ligne ...

— Ricardo Tomasi

La plupart des gens utilisent LESS pour ne pas avoir à se soucier du CSS qui est généré. Quoi qu'il en soit, il s'avère que l'espace peut être utilisé après>. So & est purement redondant.

— Dave

13

La syntaxe correcte serait la suivante tandis que l'utilisation de «&» serait redondante ici.

.panel{
   > .control{
   }
}

Selon moins de directives , «&» est utilisé pour paramétrer les ancêtres (mais ce n'est pas nécessaire ici). Dans cet exemple moins , &: hover est essentiel sur : hover sinon cela entraînerait une erreur syntaxique. Cependant, il n'y a pas d'exigence syntaxique de ce type pour l'utilisation de «&» ici. Sinon, toutes les emboîtements nécessiteraient «&» car ils se réfèrent essentiellement au parent.

— sbharti
source

1

@JJF pas de question car c'est une réponse?

— Bill Woodger

0

Au cas où vous auriez besoin de cibler plus de sélecteurs:

.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}

— stojsins
source

-1

De plus, si vous ciblez le premier élément enfant, tel que le premier <td>d'un <tr>, vous pouvez utiliser quelque chose comme ceci:

tr {
    & > td:first-child {font-weight:bold;}
}

cela permet de réduire les déclarations de classe lorsqu'elles ne sont pas nécessaires.

— seth yount
source