shared-adaptive

shared-adaptive

$devices: tablet-landscape, tablet-portrait, tablet, phone, mobile, mobile-landscape, not-mobile !default;
$tablet-landscape: 1024px !default;
$tablet-portrait: 768px !default;
$phone: 480px !default;

@mixin device($device) {
    //481...1024
	@if $device == 'tablet' {
		@media screen and (max-width: $tablet-landscape) and (min-width: $phone + 1) {
			@content;
		}
	}
    //0...768
    @else if $device == 'mobile-landscape' {
        @media screen and (max-width: $tablet-portrait) {
            @content;
        }
    }
    //769...1024
    @else if $device == 'tablet-landscape' {
		@media screen and (max-width: $tablet-landscape) and (min-width: $tablet-portrait + 1) {
			@content;
		}
	}
    //481...768
    @else if $device == 'tablet-portrait' {
		@media screen and (max-width: $tablet-portrait) and (min-width: $phone + 1) {
			@content;
		}
	}
    //0...480
    @else if $device == 'phone' {
		@media screen and (max-width: $phone) {
			@content;
		}
	}
    //0...1024
    @else if $device == 'mobile' {
		@media screen and (max-width: $tablet-landscape) {
			@content;
		}
	}
    //1025...+Infinity
    @else if $device == 'not-mobile' {
		@media screen and (min-width: $tablet-landscape + 1) {
			@content;
		}
	}
    @else if not index($devices, $device) {
		@error 'Wrong argument';
	}
}

//использовать только в крайних случаях
@mixin device-custom( $min, $max ) {

    @if $min != 'none' and $max != 'none' {
        @media screen and (min-width: $min) and (max-width: $max) {
            @content;
        }
    }
    @else if $min == 'none' {
        @media screen and (max-width: $max) {
            @content;
        }
    }
    @else if $max == 'none' {
        @media screen and (min-width: $min) {
            @content;
        }
    }
    @else if $min == null and $max == null {
        @error 'Wrong arguments';
    }
}