Media-kyselyt LESS:ssä
Tehdään funktio, joka lisää elementille media-kyselyn. Olkoon esimerkkinä kysely, joka säätelee tyylejä mobiililaitteille. Nimetään funktiomme vastaavasti:
.mobile(@code) {
}
Funktiomme ottaa parametrinaan koodilohkon. Tuodaan tämä lohko media-kyselyn sisällä:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Käytetään nyt funktiotamme:
div {
.mobile({
width: 300px;
});
}
Käännöksen tuloksena divimme päätyy media-kyselyn sisälle, saaden vastaavat tyylit:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Tee funktio tablet, joka asettaa
tyylit tableteille.
Tee funktio gadget, joka asettaa
tyylit matkapuhelimille ja tableteille.
Tee funktio notebook, joka asettaa
tyylit kannettaville tietokoneille.
Tee funktio desktop, joka asettaa
tyylit työasemille.
