LESS'te Medya Sorguları
Bir öğeye medya sorgusu ekleyen bir fonksiyon yapalım. Örnek olarak, mobil cihazlar için stilleri düzenleyen bir sorgu olsun. Fonksiyonumuzu buna göre adlandıralım:
.mobile(@code) {
}
Fonksiyonumuz parametre olarak bir kod bloğu alacak. Bu bloğu bir medya sorgusu içinde çıkaralım:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Şimdi fonksiyonumuzu kullanalım:
div {
.mobile({
width: 300px;
});
}
Sonuç olarak, derlemeden sonra div'imiz ilgili stilleri alarak medya sorgusunun içinde yer alacak:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Tabletler için stiller belirleyen
tablet fonksiyonunu yapın.
Mobil telefonlar ve tabletler için stiller belirleyen
gadget fonksiyonunu yapın.
Dizüstü bilgisayarlar için stiller belirleyen
notebook fonksiyonunu yapın.
Masaüstü bilgisayarlar için stiller belirleyen
desktop fonksiyonunu yapın.
