What are the best practices for using SCSS mixins?

What are the best practices for using SCSS mixins?

When using SCSS mixins, it's best to keep them simple and reusable. Avoid complex logic within mixins.

Can you give me an example of a simple 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;
}

How do I include parameters in my mixins?

You can include parameters by defining them in the mixin declaration. For example:

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

What should I avoid when creating mixins?

Avoid using too many parameters, as it can make the mixin hard to use. Also, steer clear of including too much logic.