Media-navrae in LESS
Kom ons maak 'n funksie wat 'n media-navraag by 'n element sal voeg. Laat dit vir die voorbeeld 'n navraag wees wat style vir mobiele toestelle reguleer. Laat ons ons funksie dienooreenkomstig noem:
.mobile(@code) {
}
Ons funksie sal 'n blok kode as parameter aanvaar. Kom ons druk hierdie blok binne die media-navraag uit:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Laat ons nou ons funksie gebruik:
div {
.mobile({
width: 300px;
});
}
As gevolg, na samestelling, sal ons div binne die media-navraag beland, met die ooreenstemmende style:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Maak 'n funksie tablet wat
style vir tablets spesifiseer.
Maak 'n funksie gadget wat
style vir selfone en tablets spesifiseer.
Maak 'n funksie notebook wat
style vir skootrekenaars spesifiseer.
Maak 'n funksie desktop wat
style vir rekenaars spesifiseer.
