What are mixins in Sass and how do I use them?

What are mixins in Sass and how do I use them?

Mixins in Sass are reusable blocks of styles that can be included in other selectors. They help keep your code DRY.

Can you give me an example of a mixin?

Sure! Here's a simple mixin for a button:

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

You can use it like this:

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

What are the benefits of using mixins?

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

Can mixins accept multiple parameters?

Yes, mixins can accept multiple parameters, allowing for more flexible and dynamic styles. For example:

@mixin card($bg-color, $padding) {
  background-color: $bg-color;
  padding: $padding;
  border-radius: 10px;
}