What are some advanced techniques for using Sass mixins?

What are some advanced techniques for using Sass mixins?

Advanced Sass mixins can include features like parameter defaults, conditional logic, and even loops. Would you like examples?

Yes, please provide an example of a mixin with conditional logic.

Sure! Here's a mixin that applies different styles based on a parameter:

@mixin button($color: blue) {
  background-color: $color;
  color: white;
  @if $color == red {
    border: 1px solid darkred;
  }
}

That's great! How can I use loops in mixins?

You can use the @for directive in a mixin to create styles for multiple elements. For example:

@mixin grid($columns) {
  @for $i from 1 through $columns {
    .col-#{$i} {
      width: 100% / $columns;
    }
  }
}

Thanks! Can you explain how to use mixins for responsive design?