What are the best practices for using CSS mixins?

What are the best practices for using CSS mixins?

When using CSS mixins, it's best to keep them simple and focused on a single purpose. Avoid overusing them to prevent complexity.

Can you give me an example of a simple mixin?

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

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

How do I include this mixin in my styles?

You can include the mixin in your styles like this:

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

Are there any performance concerns with using mixins?

Yes, excessive use of mixins can lead to larger CSS files and slower performance. Use them judiciously.