Selector de niño inmediato en MENOS

112

¿Hay alguna forma de que LESS aplique el selector secundario inmediato (>) en su salida?

En mi estilo. Sin, quiero escribir algo como:

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

y haz que MENOS genere algo como:

.panel > .control { ... }

css css-selectors less

— Dave
fuente

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

— thirtydot

15

Curiosamente, el fragmento de 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 decirlo con seguridad para otros analizadores.

— Dave

2

Yo sólo lo he probado, y el código original de la pregunta lo hace el trabajo en less.js. Véalo

— thirtydot

1

Sí, mis disculpas, funciona como un encanto con el espacio. +1 para ti. No sé cómo no me funcionó durante horas ayer ... de lo contrario, no habría publicado la pregunta.

— Dave

144

ACTUALIZAR

En realidad, el código de la pregunta original funciona bien. Puedes seguir con el >selector de niños.

Encontré la respuesta.

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

Tenga en cuenta la falta de espacio entre ">" y ".", De lo contrario no funcionará.

— Dave
fuente

4

No dudaría de que es un error si no funciona con un espacio allí, a menos que esté específicamente documentado.

— BoltClock

Esto es solo engañar al analizador. Lo ve como un solo selector, por lo que obtiene .panel >.control.

— Ricardo Tomasi

Lo tomo como una característica más que como un error. Es mucho más consistente cuando lo usas de esta manera en lugar de "&". Creo que es un código más claro si solo usa "&" con pseudoclases y no con clases secundarias.

— Dave

1

Es una característica de CSS, que acepta tanto div > py div>p. La consistencia siempre usaría espacio entre selectores (eche un vistazo al CSS generado).

— Ricardo Tomasi

Claro, pero estaba más preocupado por la consistencia de usar &.

— Dave

78

La forma oficial:

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

& siempre se refiere al selector actual.

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

— Ricardo Tomasi
fuente

1

Creo que esto también está engañando al analizador (como se sintió con la otra respuesta). Dejame explicar. Como dijiste, & siempre se refiere al selector actual (padre). Entonces, lo que sea que esté después, debería aplicarse a los padres. Y ese es el papel de las pseudoclases. Las clases para niños inmediatos están más cerca de las clases para niños **** gasp **** que las pseudoclases. Entonces, usar solo> es más intuitivo y lógico.

— Dave

6

¿Qué crees que es más correcto? div > po div >p? El &combinador es la forma canónica de hacerlo en MENOS, no mis sentimientos. Tu explicación es retórica. Algunas personas escriben su CSS en una sola línea ...

— Ricardo Tomasi

La mayoría de las personas usan MENOS para no tener que preocuparse por el CSS real que se genera. De todos modos, resulta que el espacio se puede utilizar después de>. Entonces & es puramente redundante.

— Dave

13

La sintaxis correcta sería la siguiente, mientras que el uso de '&' sería redundante aquí.

.panel{
   > .control{
   }
}

De acuerdo con menos pautas , '&' se usa para parametrizar ancestros (pero aquí no existe tal necesidad). En este ejemplo menos , &: hover es esencial sobre : hover, de lo contrario, resultaría en un error sintáctico. Sin embargo, no existe tal requisito sintáctico para usar '&' aquí. De lo contrario, todos los anidamientos requerirían '&' ya que esencialmente se refieren al padre.

— sbharti
fuente

1

@JJF no hay duda porque es una respuesta?

— Bill Woodger

0

En caso de que necesite apuntar a más selectores:

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

— Stojsins
fuente

-1

Además, si tiene como destino el primer elemento secundario, como el primero <td>de un <tr>, podría usar algo como esto:

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

esto ayuda a reducir las declaraciones de clases cuando no son necesarias.

— seth yount
fuente