Μίλησέ μου για τα mixins SCSS για τα media queries

Τα SCSS mixins για media queries επιτρέπουν την άνετη και επαναλαμβανόμενη χρήση κώδικα για ευέλικτο σχεδιασμό. Αντί να γράφετε χειροκίνητα media queries κάθε φορά, μπορείτε να ορίσετε ένα mixin που δέχεται παραμέτρους και δημιουργεί τους απαραίτητους κανόνες CSS.

Παράδειγμα ενός απλού mixin για media query βασισμένο στο πλάτος οθόνης:

@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (max-width: 900px) {
      @content;
    }
  } @else if $breakpoint == desktop {
    @media (min-width: 901px) {
      @content;
    }
  }
}

// Χρήση:
.container {
  width: 100%;
  @include respond-to(mobile) {
    width: 90%;
  }
}

Αυτή η προσέγγιση βελτιώνει την αναγνωσιμότητα και διευκολύνει τη συντήρηση του κώδικα, επιτρέποντας τη διαχείριση των breakpoints κεντρικά. Μπορείτε να επεκτείνετε τα mixins προσθέτοντας νέες συνθήκες ή παραμέτρους για μεγαλύτερη ευελιξία.