css - functions - less npm

Selector infantil inmediato en MENOS

Question

¿Hay alguna forma de tener MENOS aplicar el selector secundario inmediato (>) en su salida?

En mi estilo. Sin embargo, quiero escribir algo como:

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

y tienen MENOS generar algo como:

.panel > .control { ... }

Answer 1

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

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

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

Answer 2

La forma oficial:

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

& siempre se refiere al selector actual.

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

Answer 3

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

.panel{
   > .control{
   }
}

De acuerdo con menos pautas , ''&'' se usa para parametrizar ancestros (pero aquí no hay tal necesidad). En este ejemplo menos , &: flotar es esencial sobre : flotar, 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 los padres.

Answer 4

ACTUALIZAR

En realidad, el código en la pregunta original funciona bien. Puedes simplemente quedarte 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á.