What are some advanced mixin techniques in CSS?

What are some advanced mixin techniques in CSS?

Advanced mixin techniques in CSS include using functions, conditional logic, and parameterized mixins to create reusable styles.

Can you give me an example of a mixin that uses parameters?

Sure! Here's a simple example:

@mixin button($color, $padding: 10px) {
  background-color: $color;
  padding: $padding;
  border: none;
  border-radius: 5px;
}

You can use it like this:

.button-primary {
  @include button(blue);
}

How can I use mixins with media queries?

You can nest mixins within media queries to create responsive styles. For example:

@mixin responsive-button($color) {
  @include button($color);
  @media (max-width: 600px) {
    padding: 5px;
  }
}

What are the benefits of using mixins?

Mixins promote code reusability, reduce redundancy, and make it easier to maintain styles across your project.