O LESS tem um recurso de “extensão”?

93

SASS tem um recurso chamado @extend que permite a um seletor herdar as propriedades de outro seletor, mas sem copiar as propriedades (como mixins).

O LESS também tem esse recurso?

css sass less extend jonschlinkert
fonte
Para esclarecimento, as outras referências de pergunta NÃO perguntam a mesma coisa. Esta pergunta é simples: "O LESS tem um recurso de extensão?". A outra questão é perguntar algo que requer muito mais reflexão sobre as decisões de estilo.
jonschlinkert
... para adicionar ao meu último comentário, a outra pergunta inclui a tag "estilo de codificação" que apóia ainda mais meu ponto.
jonschlinkert

Respostas:

156

Sim, Less.js introduzido extendna v1.4.0 .

:extend()

Em vez de implementar a @extendsintaxe at-rule ( ) usada por SASS e Stylus, o LESS implementou a sintaxe de pseudo-classe, que dá à implementação do LESS a flexibilidade de ser aplicada diretamente a um seletor em si ou dentro de uma instrução. Portanto, ambos funcionarão:

.sidenav:extend(.nav) {...}

ou 

.sidenav {
    &:extend(.nav);
    ...
}

Além disso, você também pode usar a alldiretiva para estender classes "aninhadas":

.sidenav:extend(.nav all){};

E você pode adicionar uma lista separada por vírgulas de classes que deseja estender:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

Ao estender os seletores aninhados, você deve notar as diferenças:

seletores aninhados .selector1e selector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

Agora .selector3:extend(.selector1 .selector2){};produz:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

, .selector3:extend(.selector1 all){};saídas:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

, .selector3:extend(.selector2){};saídas

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

e finalmente .selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}
jonschlinkert
fonte
15
"A sintaxe do LESS é mais" fiel "ao CSS tradicional do que a @extendsintaxe at-rule ( ) implementada pelo SASS e Stylus, que normalmente é reservada para fornecer instruções ou diretivas ao analisador CSS no navegador." <- o que diabos isso quer dizer? Cheira a falar de marketing.
cimmanon
1
vamos continuar essa discussão no chat
steveax
2
@cimmanon Acho que você está certo, não foi minha intenção soar assim. Mas há muita controvérsia sobre a sintaxe de Less, aparentemente porque as pessoas esperavam que Less usasse a mesma sintaxe do SASS. Mas em CSS, pseuso-seletores são usados ​​para regras de correspondência de padrões para determinar quais regras de estilo se aplicam a elementos na árvore do documento, enquanto as regras-at são usadas para diretivas de "nível superior" (como mencionei). Então, talvez eu deva editar a resposta para fornecer esse detalhe? Ou é outra pergunta: "Por que LESS escolheu a sintaxe do pseudo-seletor?"
jonschlinkert
4
você realmente deveria atualizar a documentação menos online, não consigo ver nada sobre: ​​extend () e teria sido bom saber antes
Joshua Bambrick
2
A documentação, assim como o código, é mantida pela comunidade. Seria ótimo ter esse tipo de sugestão no repo real, e solicitações pull são sempre bem-vindas ;-)
jonschlinkert
6

Maneira fácil de estender uma função no framework Less

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

Resultado

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

Referir https://codepen.io/sprushika/pen/MVZoGB/

Spushika Mulakala
fonte