SASS/SCSS media mixin | The Dev Tool |

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) {

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


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