Sass(SCSS) @mixin, @extend

@mixin

Mixin allows you to define style that can be re-used throughout your stylesheet.
(They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.)

How to use @mixin

@mixin name{ ... }  //create
@include name(arguments..)  //use

You can make a file and import or can declare mixin in the file you are working. If you'd like to make multiple mixin and use, create _mixins.scss to manage.

Using @mixin

// SCSS

@mixin center-xy{
    display: flex;
    justify-content : center;
    align-items : center;
}

// You can used @mixin center-xy like below, It's done by one line because of @mixin

.card{
    @include center-xy; 
}

.aside{
    @include center-xy; 
}

**But putting all the code inside one @mixin isn't a good way of using it. You should add related styles in @mixin so that you can make more reusable set.

Arguments

@mixin can take arguments after its name. It allows their behavior to be customised when they are called.
SCSS

//SCSS
@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
} 
//background related code.
//You can style element differently depending 
 arguments of mixin.

.profile {
  @include image-style("./assets/user.jpg", cover, no-repeat, center, center);
}

.box-one {
  @include image-style(url("/images/poster1.svg"), cover, no-repeat, 40%, 50%);
}

CSS

/* CSS */
.profile {
  background-image: url("./assets/user.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.box-one {
  background-image: url(url("/images/poster1.svg"));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 40% 50%;
}

Setting default value

// SCSS
// $positionX, $positionY  have default value now. If they don't receive value, it takes default value.
@mixin image-style($ul, $size, $repeat, $positionX : 50%, $positionY : 50%) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
}

.profile {
  @include image-style("./assets/user.jpg", cover, no-repeat);
}

/* CSS */
.profile {
  background-image: url("./assets/user.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

// profile and .box-one are not related elements but because they have similar styles related to background, you can make @mixin about the background and use them to each elements instead of repeating code.