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; }
By Code 100mph