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; }
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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; }
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