NG SZE CHEN
OskaDev

OskaDev

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

Published on 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