<pre><code class="lang-scss">@mixin flex_property($var1) {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: $var1;
}
.container{
 background-color: $bg-color;
 padding: 1rem;
 width: 28rem;
 margin: 2rem auto;
 border-radius: 1rem;
 @include flex_property(row); // here you can see the mixin property
}
</code></pre>

```scss
@mixin flex_property($var1) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: $var1;
}
.container{
    background-color: $bg-color;
    padding: 1rem;
    width: 28rem;
    margin: 2rem auto;
    border-radius: 1rem;
    @include flex_property(row); // here you can see the mixin property
}
```

04/15 - SCSS @mixin-@include | What is @mixin? And what is the use of @mixin?

@mixin allows you to create reusable CSS code and the @include acts as a receiver, like it receives the value of @mixin.