Universal and easily extendable SCSS media query mixins

media_mixins.scss

@mixin media ($settings) {
    $mediaSettings: ("only screen");

    @each $rule, $value in $settings {
        @if $rule == "min" {
            $mediaSettings:
                append(
                    $mediaSettings,
                    "and (min-device-width: #{$value})"
                );
        }

        @if $rule == "max" {
            $mediaSettings:
                append(
                    $mediaSettings,
                    "and (max-device-width: #{$value})"
                );
        }

        @if $rule == "orientation" {
            $mediaSettings:
                append(
                    $mediaSettings,
                    "and (orientation: #{$value})"
                );
        }
    }

    @media #{$mediaSettings} {
        @content;
    }
}

$tablet_breakpoint: 767px;

@mixin phone {
    @include media ((max: $tablet_breakpoint)) {
        @content;
    }
}

@mixin tablet {
    @include media ((min: $tablet_breakpoint + 1px)) {
        @content;
    }
}

@mixin landscape {
    @include media ((orientation: landscape)) {
        @content;
    }
}

@mixin portrait {
    @include media ((orientation: portrait)) {
        @content;
    }
}

@mixin tablet-landscape {
    @include tablet {
        @include landscape {
            @content;
        }
    }
}

@mixin tablet-portrait {
    @include tablet {
        @include portrait {
            @content;
        }
    }
}

@mixin phone-landscape {
    @include phone {
        @include landscape {
            @content;
        }
    }
}

@mixin phone-portrait {
    @include phone {
        @include portrait {
            @content;
        }
    }
}