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; }
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