Sample Code

$min_device: (
    mobile-small: 320px,
    mobile-medium: 320px,
    mobile-large: 425px,
    tablet: 768px,
    laptop: 1024px,
    laptop-large: 1440px
);
$max_device: (
    mobile-small: 375px,
    mobile-medium: 425px,
    mobile-large: 768px,
    tablet: 1024px,
    laptop: 1440px,
    laptop-large: 2560px
);

@mixin larger_device($device, $breakpoint) {
    $min: if(type-of($device) == string, map-get($min_device, $device), $device);
    @if $breakpoint == max {
        @media ( min-width: $min ) {
            @content;
        }
    } @else {
        $max: if(type-of($breakpoint) == string, map-get($max_device, $device), $breakpoint);
        @media ( min-width: $min ) and ( max-width: $breakpoint ) {
            @content;
        }
    }
}

@mixin smaller_device($device, $breakpoint) {
    $max: if(type-of($device) == string, map-get($max_device, $device), $device);
    @if $breakpoint == min {
        @media ( max-width: $max ) {
            @content;
        }
    } @else {
        $min: if(type-of($breakpoint) == string, map-get($min_device, $breakpoint), $breakpoint);
        @media ( min-width: $min ) and ( max-width: $max ) {
            @content;
        }
    }
}

@mixin device($device) {
    @media 
        ( min-width: map-get($min_device, $device) ) and 
        ( max-width: map-get($max_device $device) )
    {
        @content;
    }
}

Example Usage

- device(mobile-small)
>> @media ( min-width: 320px, max-width: 375px )

- smaller_device(mobile-small, min) 
>> @media ( max-width: 375px )

- smaller_device(mobile-large, mobile-small)
>> @media ( min-width: 320px, max-width 768px )

- smaller_device(mobile-large, 123px)
>> @media ( min-width: 123px, max-width: 768px )

- larger_device(mobile-large, max)
>> @media ( min-width: 425px ) 

- larger_device(mobile-large, laptop) 
>> @media ( min-width: 425px, max-width: 1440px )

- larger_device(mobile-large, max)
>> @media ( min-width: 425px ) 

- larger_device(mobile-large, 1234px)
>> @media ( min-width: 425px, max-width: 1234px )

SCSS Device Media Query

This device media query is aim to be more readable by specific device based instead of xs, xl or other short naming.

Sample Code

Example Usage