When should I use CSS mixins?

What are CSS mixins and when should I use them?

CSS mixins are reusable blocks of styles that can be included in other CSS rules. You should use them when you want to avoid code duplication and maintain consistency across your styles.

Can you give me an example of a CSS mixin?

Sure! Here's a simple example:

@mixin rounded-corners {
  border-radius: 10px;
}

.button {
  @include rounded-corners;
  background-color: blue;
  color: white;
}

Are there any downsides to using mixins?

Yes, while mixins can help reduce redundancy, overusing them can lead to larger CSS files and potentially slower performance. It's important to use them judiciously.

How do mixins compare to functions in CSS preprocessors?

Mixins allow you to include styles, while functions return values. Use mixins for style reuse and functions for calculations or returning values.