How do I create a mixin in SCSS?

How do I create a mixin in SCSS?

Creating a mixin in SCSS is simple! You use the @mixin directive followed by the mixin name and any parameters.

Can you give me an example of a mixin?

Sure! Here's a basic example:

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

You can then use it like this:

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

What if I want to include multiple properties in a mixin?

You can include multiple properties by adding them inside the mixin. For example:

@mixin button-styles($color) {
  background-color: $color;
  border: none;
  padding: 10px 20px;
  color: white;
}

How do I use that mixin in my styles?

You can use it like this:

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