Media Queries në LESS
Le të bëjmë një funksion që do të shtojë në element një media query. Le të jetë për shembull një query që rregullon stiljet për pajisjet mobile. Le ta emërojmë funksionin tonë në përputhje me rrethanat:
.mobile(@code) {
}
Funksioni ynë do të marrë si parametër një bllok kodi. Le ta vendosim këtë bllok brenda media query:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Tani le të përdorim funksionin tonë:
div {
.mobile({
width: 300px;
});
}
Si rezultat, pas kompilimit, div-i ynë do të gjendet brenda media query, duke marrë stiljet përkatëse:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Bëni një funksion tablet, që vendos
stilje për tableta.
Bëni një funksion gadget, që vendos
stilje për telefona dhe tableta.
Bëni një funksion notebook, që vendos
stilje për laptopa.
Bëni një funksion desktop, që vendos
stilje për desktopa.
