Media Queries dalam LESS
Mari kita buat satu fungsi, yang akan menambah media query kepada elemen. Biarkan untuk contoh ini ia menjadi query yang mengawal gaya untuk peranti mudah alih. Mari namakan fungsi kita sewajarnya:
.mobile(@code) {
}
Fungsi kita akan menerima blok kod sebagai parameter. Mari keluarkan blok ini di dalam media query:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Sekarang mari gunakan fungsi kita:
div {
.mobile({
width: 300px;
});
}
Hasilnya, selepas kompilasi, div kita akan berada di dalam media query, mendapatkan gaya yang sewajarnya:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Buat fungsi tablet, yang menetapkan
gaya untuk tablet.
Buat fungsi gadget, yang menetapkan
gaya untuk telefon mudah alih dan tablet.
Buat fungsi notebook, yang menetapkan
gaya untuk komputer riba.
Buat fungsi desktop, yang menetapkan
gaya untuk desktop.
