Mixins στο LESS

Σε αυτό το μάθημα θα γνωρίσουμε τα mixins (αναμείξεις), που επιτρέπουν την συμπερίληψη μιας κλάσης μέσα σε μια άλλη. Ας δούμε τι είναι και πώς να δουλέψουμε με αυτά.

Στην ουσία, ένα mixin είναι η χρήση μιας κλάσης μέσα σε άλλες, όπου μια κλάση είναι ένα πρότυπο - ένα συγκεκριμένο κομμάτι κώδικα, που μπορούμε να χρησιμοποιήσουμε σε πολλά σημεία.

Πού είναι αυτό βολικό; Στο καθαρό CSS θα έπρεπε να γράφουμε το πρότυπο κώδικα παντού όπου χρειάζεται, ενώ στο LESS μπορούμε να το γράψουμε σε ένα σημείο και μετά να το συνδέσουμε στα απαραίτητα σημεία του κώδικα.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε την ακόλουθη κλάση:

.mix {
	width: 100px;
	height: 100px;
}

Ας χρησιμοποιήσουμε αυτή την κλάση ως mixin:

p {
	.mix;
	color: red;
}

Σαν αποτέλεσμα, μετά τη μεταγλώττιση, οι στυλ της κλάσης μας θα εισαχθούν στην παράγραφο:

p {
	width: 100px;
	height: 100px;
	color: red;
}

Πείτε μας, ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

.mix {
	color: white;
	background: black;
}

p {
	.mix;
	width: 300px;
}