Mixins σε SASS

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

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

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

Για τη δήλωση των mixins χρησιμοποιείται η διεύθυνση @mixin, μετά από την οποία ορίζουμε το όνομά του, τις παραμέτρους και το μπλοκ με το σώμα:

@mixin mix {
	width: 100px;
	height: 100px;
}