What are CSS preprocessor mixins and how do I use them?

What are CSS preprocessor mixins and how do I use them?

CSS preprocessor mixins are reusable blocks of code that allow you to define styles that can be included in other selectors. They help reduce repetition and make your CSS more maintainable.

Can you give me an example of a mixin in Sass?

Sure! Here's a simple example in Sass:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(10px);
}

How do mixins differ from functions in Sass?

Mixins allow you to include styles, while functions return a value. Mixins can take arguments and output CSS, whereas functions are used for calculations or returning values.

Are there any performance concerns with using mixins?

Yes, excessive use of mixins can lead to larger CSS files, as they duplicate styles. It's important to use them judiciously to maintain performance.