Tell me about SCSS mixins for media queries.

SCSS mixins for media queries allow for convenient and reusable code for responsive design. Instead of writing media queries manually each time, you can define a mixin that takes parameters and generates the necessary CSS rules.

Example of a simple media query mixin based on screen width:

@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;
    }
  }
}

// Usage:
.container {
  width: 100%;
  @include respond-to(mobile) {
    width: 90%;
  }
}

This approach improves readability and makes code maintenance easier by centrally managing breakpoints. Mixins can be extended by adding new conditions or parameters for more flexible customization.