2
respostas

Não consegui entender essa resposta

Pode explicar com mais detalhes? Porque isso em Less: .erro { background: #f00; }

.alerta { border-radius: 3px; &:extend(.erro); }

Gera isso em CSS: .erro, .alerta { background: #f00; }

.alerta { border-radius: 3px; }

2 respostas

Olá Ane,

O extend do LESS funciona apenas adicionando o seletor que tem o extend, .alerta nesse caso, e colocando ele junto do seletor extendido, .erro nesse caso, resultando em:

.erro, .alerta {
    // Regras de .erro
    // agora aplicadas para .alerta também
}

Assim tudo que é aplicado a .erro é aplicado para .alerta.

E o restante, que são apenas as regras específicas de .alerta, ele gera normal:

.alerta {
    // Regras específicas de .alerta
}

Resumindo, esse é o jeito mais otimizado que o LESS encontra de gerar o CSS, evitando duplicar as regras.

Lembrando que os dois códigos abaixo tem o mesmo resultado e são duas opções válidas, mas o LESS decide por usar a primeira opção:

.erro, .alerta {
  background: #f00;
}

.alerta {
  border-radius: 3px;
}

//==================//

.erro {
  background: #f00;
}

.alerta {
  border-radius: 3px;
  background: #f00;
}

Espero ter ajudado. Se ainda tiver qualquer dúvida é só perguntar.

Entendi, obrigada