Y at-il de toute façon que LESS applique le sélecteur enfant immédiat (>) dans sa sortie?Sélecteur d'enfant immédiat dans MOINS
Dans mon style.less, je veux écrire quelque chose comme:
.panel {
...
> .control {
...
}
}
et ont moins de générer quelque chose comme:
.panel > .control { ... }
MISE À JOUR
En fait, le code la question originale fonctionne bien. Vous pouvez simplement coller avec le sélecteur d'enfant >.
J'ai trouvé la réponse.
.panel {
...
>.control {
...
}
}
Notez le manque d'espace entre ">" et ".", Sinon cela ne fonctionnera pas.
Je ne doute pas que c'est un bug si cela ne fonctionne pas avec un espace là-bas, à moins qu'il ne soit spécifiquement documenté. – BoltClock
Cela ne fait que tromper l'analyseur. Il le voit comme un seul sélecteur, donc vous obtenez '.panel> .control'. –
Je le prends comme une caractéristique plutôt qu'un bug. C'est beaucoup plus cohérent quand vous l'utilisez de cette façon par opposition au "&". Je pense que le code est plus clair si vous utilisez uniquement "&" avec des pseudo-classes et non des classes enfants. – Dave
La manière officielle:
.panel {
& > .control {
...
}
}
& se réfère toujours au sélecteur courant.
Voir http://lesscss.org/features/#features-overview-feature-nested-rules
Je pense que c'est aussi juste de tromper l'analyseur (comme vous avez estimé à propos de l'autre réponse). Laisse-moi expliquer. Comme vous l'avez dit, & se réfère toujours au sélecteur (parent) actuel. Donc, quoi que ce soit après cela devrait ** s'appliquer ** au parent. Et, c'est le rôle des pseudo-classes. Les classes d'enfants immédiates sont plus proches des classes d'enfants **** gasp que des pseudo-classes. Donc, utiliser juste> est plus intuitif et logique. – Dave
Que pensez-vous est plus correct? 'div> p' ou' div> p'? Le combinateur '&' est la façon canonique de le faire en MOINS, pas mes sentiments. Votre explication est répétitive. Certaines personnes écrivent leur CSS en une seule ligne ... –
La plupart des gens utilisent MOINS pour ne pas avoir à se soucier du CSS qui est généré. De toute façon, il s'avère que l'espace peut être utilisé après>. Donc & est purement redondant. – Dave
Aussi, si vous visez le premier élément enfant, comme la première <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 lorsque ils ne sont pas nécessaires.
La syntaxe correcte serait la suivante alors que l'utilisation de '&' serait redondante ici.
.panel{
> .control{
}
}
Selon less guidelines, « & » est utilisé pour les ancêtres paramétrez (mais il n'y a pas besoin ici). Dans this less example, &: hover est essentiel sur : hover sinon cela entraînerait une erreur syntaxique. Cependant, il n'y a aucune exigence syntaxique pour utiliser '&' ici. Dans le cas contraire, toutes les imbrications nécessitent '&' car elles font essentiellement référence au parent.
@JJF pas question parce que c'est une réponse? –
http://stackoverflow.com/questions/7634932/less-js-strong-nested-rules – thirtydot
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 ajouter le "&". J'utilise less.js. Je ne peux pas dire à coup sûr pour les autres analyseurs. – Dave