NG SZE CHEN
OskaDev

Follow

OskaDev

Follow
SCSS Device Media Query

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.

NG SZE CHEN's photo
NG SZE CHEN
·Jul 26, 2019·

2 min read

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 )
 
Share this