SASS/SCSS media mixin | The Dev Tool | Toolel.com

This is for making media breakpoints for different screensizes.

How to do it

Add this mixin to your 'mixins.scss' file

@mixin media-up($breakpoint) {
    @each $breakpoints, $size in $media {
        @if $breakpoint==$breakpoints {
            @media screen and (min-width: $size) {
                @content;
            }
        }
    }
}

Create a list of media breakpoints in your 'media.scss' or 'variables.scss'

$media: (
    xs: 0,
    sm: 480px,
    md: 768px,
    lg: 1024px,
    xl: 1300px
);

In the code you could just use @include media-up(lg) and it will be compiled to a regular media query

Created by: Anastasiia

Comments

This page is only partially working without JavaScript. It will show content, but the tools and interactivity cannot be shown without JavaScript enabled. Please enable JavaScript for this page. About Us