How do I create a mixin in CSS?

How do I create a mixin in CSS?

To create a mixin in CSS, you can use a preprocessor like Sass. Here's a simple example:

@mixin rounded-corners($radius) {
  border-radius: $radius;
}

.button {
  @include rounded-corners(10px);
}

This mixin allows you to apply rounded corners to any element.

Can I use mixins in plain CSS?

No, mixins are not a feature of plain CSS. They are part of CSS preprocessors like Sass or Less. You need to compile your preprocessor code into standard CSS.

What are the benefits of using mixins?

Mixins help you avoid code duplication, maintain consistency, and make your styles more modular and easier to manage.

Can you show me a more complex example?

Sure! Here's a more complex mixin that includes multiple properties:

@mixin button-styles($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary-button {
  @include button-styles(blue, white);
}

.secondary-button {
  @include button-styles(gray, black);
}

This mixin allows you to create buttons with different styles easily.