What is a Mixin and how to use on?

A Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site.

To define mixin:

@mixin grid($flex: true /*default argument*/) {
    @if $flex {
        @include flex;
    } @else {
        display: block;
    }
}

To use a Mixin, we simply use @include followed by the name of the Mixin and a semi-colon.

/*scss*/
.row {
    @include grid(true);
}

/*css*/
.row {
    display: -webkit-flex;
    display: flex;
}