scss Bootstrap mixins

Posted 2021-05-17

@mixin respond($minWidth: 0, $maxWidth: 0) {
    @if $minWidth and $maxWidth
    {
        @media screen and (min-width: $minWidth) and (max-width: $maxWidth) { @content; }
    }
    @else if $minWidth
    {
        @media screen and (min-width: $minWidth) { @content; }
    }
    @else if $maxWidth
    {
        @media screen and (max-width: $maxWidth) { @content; }
    }
    @else
    {
        @warn "error - undefined params";
    }
}


@mixin breakpoint($class) 
{

    @if $class == xs
    {
        @media (max-width: 480px) { @content; } 
    }

    @elseif $class == is 
    {
        @media (max-width: 767px) { @content; }
    }

    @else if $class == sm 
    {
        @media (max-width: 991px){ @content; }
    }

    @else if $class == md 
    {
        @media (max-width: 1199px) { @content; }
    }

    @else if $class == lg 
    {
        @media (min-width: 1200px) { @content; }
    }

    @else 
    {
        @warn "Breakpoint mixin supports: is, xs, sm, md, lg";
    }
}


#test
{
    @include breakpoint(lg)
    {
        background: red;
    }

    @include breakpoint(md)
    {
        background: green;
    }    

    @include breakpoint(sm)
    {
        background: purple;
    }

    @include breakpoint(xs)
    {
        background: blue;
    }

    @include breakpoint(is)
    {
        background: gold;
    }
}