¿Hay alguna forma de tener MENOS aplicar el selector secundario inmediato (>) en su salida?Selector infantil inmediato en LESS
En mi style.less, quiero escribir algo como:
.panel {
...
> .control {
...
}
}
y tienen menos generar algo como:
.panel > .control { ... }
ACTUALIZACIÓN
En realidad, el código de la pregunta original funciona bien. Puede seguir con el selector de niños >.
Encontrado la respuesta.
.panel {
...
>.control {
...
}
}
Tenga en cuenta la falta de espacio entre ">" y ".", De lo contrario, no funcionará.
No dudaría que es un error si no funciona con un espacio allí, a menos que esté documentado específicamente. – BoltClock
Esto es solo engañar al analizador. Lo ve como un solo selector, por lo que obtienes '.panel> .control'. –
Lo tomo como una característica en lugar de un error. Es mucho más consistente cuando lo usa de esta manera que en "&". Creo que es un código más claro si solo usas "&" con pseudo-clases y no clases de niños. – Dave
La forma oficial:
.panel {
& > .control {
...
}
}
& siempre se refiere al selector actual.
Ver http://lesscss.org/features/#features-overview-feature-nested-rules
Creo que esto también es solo engañar al analizador sintáctico (como lo que sientes acerca de la otra respuesta). Dejame explicar. Como dijiste, y siempre se refiere al selector actual (principal). Entonces, lo que sea que esté después debe ** aplicarse ** al padre. Y, ese es el rol de las pseudo-clases. Las clases de niños inmediatos están más cerca de las clases de niños **** **** ***** en lugar de pseudo-clases. Entonces, usar simplemente> es más intuitivo y lógico. – Dave
¿Qué crees que es más correcto? 'div> p' o' div> p'? El combinador '&' es la manera canónica de hacerlo en MENOS, no en mis sentimientos. Tu explicación es retórica. Algunas personas escriben su CSS en una sola línea ... –
La mayoría de las personas usan MENOS para que no tengan que preocuparse por el CSS real que se genera. De todos modos, resulta que el espacio puede usarse después de>. Entonces, es puramente redundante. – Dave
Además, si usted está apuntando el primer elemento secundario, tal como el primer <td> de un <tr>, podría utilizar algo como esto:
tr {
& > td:first-child {font-weight:bold;}
}
esto ayuda a reducir las declaraciones de clase cuando no son necesarios
La sintaxis correcta sería seguir al usar '&' sería redundante aquí.
.panel{
> .control{
}
}
Según less guidelines, '&' se utiliza para parametrizar antepasados (pero no hay tal necesidad aquí). En this less example, &: hover es esencial sobre : hover de lo contrario, se produciría un error sintáctico. Sin embargo, no hay tal requisito sintáctico para usar '&' aquí. De lo contrario, todas las anidaciones requerirían '&' ya que se refieren esencialmente a padres.
@JJF no hay duda porque es una respuesta? –
http://stackoverflow.com/questions/7634932/less-js-strong-nested-rules – thirtydot
De manera divertida, el fragmento en su pregunta ya era la respuesta correcta. – thirtydot
@thirtydot Claro, excepto que no funciona ... no si no quita el espacio o agrega el "&". Estoy usando less.js. No puedo decir con seguridad para otros analizadores. – Dave