Sass/SCSS Mixins

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

.container {
    @include flex-center; # use mixin
}

@mixin button($bg-color, $text-color) { # parameters
    background: $bg-color;
    color: $text-color;
    padding: 10px 20px;
}
.btn-primary {
    @include button(blue, white); # pass arguments
}

@mixin box($width: 100px) { # default value
    width: $width;
}
.small-box {
    @include box; # uses default 100px
}
.large-box {
    @include box(200px); # override default
}

@mixin media($breakpoint) {
    @media (min-width: $breakpoint) {
        @content; # inject content here
    }
}
.container {
    width: 100%;
    @include media(768px) {
        width: 750px;
    }
}