Mediaqueries i LESS
La oss lage en funksjon som vil legge til et mediaquery til elementet. La det for eksempel være en forespørsel som regulerer stiler for mobile enheter. La oss kalle funksjonen vår følgelig:
.mobile(@code) {
}
Funksjonen vår vil ta en blokk med kode som parameter. La oss skrive ut denne blokken innenfor mediaquery:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
La oss nå bruke funksjonen vår:
div {
.mobile({
width: 300px;
});
}
Som et resultat, etter kompilering, vil div-en vår havne innenfor mediaquery og få de tilsvarende stilene:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Lag en funksjon tablet som setter
stiler for nettbrett.
Lag en funksjon gadget som setter
stiler for mobiltelefoner og nettbrett.
Lag en funksjon notebook som setter
stiler for bærbare datamaskiner.
Lag en funksjon desktop som setter
stiler for stasjonære datamaskiner.
