Media Queries σε LESS

Ας φτιάξουμε μια συνάρτηση που θα προσθέτει σε ένα στοιχείο ένα media query. Ας πούμε για παράδειγμα ότι θα είναι ένα ερώτημα που ρυθμίζει τα στυλ για κινητές συσκευές. Ας ονομάσουμε τη συνάρτησή μας αντίστοιχα:

.mobile(@code) {

}

Η συνάρτησή μας θα δέχεται ως παράμετρο ένα μπλοκ κώδικα. Ας τυπώσουμε αυτό το μπλοκ μέσα στο media query:

.mobile(@code) {
	@media (max-width: 600px) {
		@code();
	}
}

Τώρα ας χρησιμοποιήσουμε τη συνάρτησή μας:

div {
	.mobile({
		width: 300px;
	});
}

Ως αποτέλεσμα, μετά τη μεταγλώττιση, το div μας θα βρίσκεται μέσα στο media query, λαμβάνοντας τα αντίστοιχα στυλ:

@media (max-width: 600px) {
	div {
		width: 300px;
	}
}

Δημιουργήστε τη συνάρτηση tablet, που ορίζει στυλ για ταμπλέτες.

Δημιουργήστε τη συνάρτηση gadget, που ορίζει στυλ για κινητά και ταμπλέτες.

Δημιουργήστε τη συνάρτηση notebook, που ορίζει στυλ για φορητούς υπολογιστές.

Δημιουργήστε τη συνάρτηση desktop, που ορίζει στυλ για desktop.