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
la 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

Réponses:

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
la 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
la 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
la 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
la 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
la source