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

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

Mixins in CSS are reusable blocks of styles that can be included in other style rules. They help reduce code duplication.

Can you give me an example of a mixin?

Sure! Here's a simple example:

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

You can use this mixin in your classes like this:

.button {
  @include rounded-corners;
}

How do mixins differ from functions in CSS?

Mixins allow you to include styles directly, while functions return values that can be used in property values. Functions are more about calculations.

Are there any libraries that help with mixins?

Yes! Libraries like Sass and Less provide built-in support for mixins, making it easier to manage your styles.