Seletor filho imediato em LESS

112

Existe alguma maneira de LESS aplicar o seletor filho imediato (>) em sua saída?

No meu estilo. Menos, quero escrever algo como:

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

e fazer com que LESS gere algo como:

.panel > .control { ... }

css css-selectors less

— Dave
fonte

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

— thirtydot

15

Curiosamente, o trecho em sua pergunta já era a resposta certa.

— trinta dias

@thirtydot Claro, exceto que não funciona ... não se você não remover o espaço ou adicionar o "&". Estou usando less.js. Não posso dizer com certeza para outros analisadores.

— Dave de

2

Eu apenas testei, e o código original da sua pergunta faz trabalho na less.js. Veja você mesmo: jsfiddle.net/thirtydot/vcE8t

— thirtydot

1

Sim, minhas desculpas, funciona como um encanto com o espaço. 1 para você. Não sei como isso não funcionou para mim por horas ontem ... caso contrário, eu não teria postado a pergunta.

— Dave

144

ATUALIZAR

Na verdade, o código da pergunta original funciona bem. Você pode apenas ficar com o >seletor filho.

Encontrei a resposta.

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

Observe a falta de espaço entre ">" e ".", Caso contrário, não funcionará.

— Dave
fonte

4

Não tenho dúvidas de que é um bug se não funcionar com um espaço lá, a menos que seja especificamente documentado.

— BoltClock

Isso é apenas enganar o analisador. Ele o vê como um único seletor, então você consegue .panel >.control.

— Ricardo Tomasi

Eu considero isso mais um recurso do que um bug. É muito mais consistente quando você o usa dessa maneira, em vez de "&". Acho que é um código mais claro se você usar apenas "&" com pseudo-classes e não com classes filhas.

— Dave de

1

É um recurso do CSS, que aceita tanto div > pe div>p. Consistência estaria sempre usando espaço entre os seletores (dê uma olhada no CSS gerado).

— Ricardo Tomasi

Claro, mas eu estava mais preocupado com a consistência do uso de &.

— Dave

78

A forma oficial:

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

& sempre se refere ao seletor atual.

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

— Ricardo Tomasi
fonte

1

Acho que isso também está enganando o analisador (como você se sentiu sobre a outra resposta). Deixe-me explicar. Como você disse, & sempre se refere ao seletor atual (pai). Então, tudo o que vier depois deve se aplicar ao pai. E esse é o papel das pseudo-classes. Aulas de crianças imediatas estão mais próximas de classes de crianças **** suspiro **** ao invés de pseudo-classes. Portanto, usar apenas> é mais intuitivo e lógico.

— Dave de

6

O que você acha que é mais correto? div > pou div >p? O &combinador é a maneira canônica de fazer em MENOS, não meus sentimentos. Sua explicação é retórica. Algumas pessoas escrevem seu CSS em uma única linha ...

— Ricardo Tomasi

A maioria das pessoas usa LESS para que não tenham que se preocupar com o CSS real que é gerado. De qualquer forma, descobriu-se que o espaço pode ser usado depois de>. Portanto, & é puramente redundante.

— Dave

13

A sintaxe correta seria a seguinte, enquanto o uso de '&' seria redundante aqui.

.panel{
   > .control{
   }
}

De acordo com menos diretrizes , '&' é usado para parametrizar ancestrais (mas não há essa necessidade aqui). Em este exemplo, menos , e: hover é mais essencial : hover caso contrário, resultaria em erro sintáctico. No entanto, não há tal requisito sintático para usar '&' aqui. Caso contrário, todos os aninhamentos exigiriam '&', pois se referem essencialmente ao pai.

— Sbharti
fonte

1

@JJF sem dúvida porque é uma resposta?

— Bill Woodger

0

Caso você precise direcionar mais seletores:

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

— Stojsins
fonte

-1

Além disso, se você tiver como alvo o primeiro elemento filho, como o primeiro <td>de a <tr>, poderá usar algo assim:

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

isso ajuda a reduzir as declarações de classe quando elas não são necessárias.

— seth yount
fonte