Media Queries di LESS
Mari kita buat fungsi yang akan menambahkan media query ke elemen. Misalnya untuk contoh ini, query yang mengatur gaya untuk perangkat seluler. Mari kita beri nama fungsi kita sesuai:
.mobile(@code) {
}
Fungsi kita akan menerima blok kode sebagai parameternya. Mari kita keluarkan blok ini di dalam media query:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Sekarang mari kita gunakan fungsi kita:
div {
.mobile({
width: 300px;
});
}
Hasilnya, setelah kompilasi, div kita akan berada di dalam media query, mendapatkan gaya yang sesuai:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Buatlah fungsi tablet, yang memberikan
gaya untuk tablet.
Buatlah fungsi gadget, yang memberikan
gaya untuk ponsel dan tablet.
Buatlah fungsi notebook, yang memberikan
gaya untuk laptop.
Buatlah fungsi desktop, yang memberikan
gaya untuk desktop.
