CODEWITHSUNDEEP
sassmediaresponsive
Maciej S.
Maciej S.

Reputation: 1903

Media queries in Sass

I am wondering if there is a way to write media queries in sass, so I can give a certain style between let's say: 300px to 900px

in css it looks like this

@media only screen and (min-width: 300px) and (max-width: 900px){

}

I know I can write 

@media (max-width: 900px)

in sass but how to make that range?

Upvotes: 71

Views: 210343

Answers (4)

Kyzer
Kyzer

Reputation: 568

This is what I use for a Mixin with sass, it allows me to quickly reference the breakpoint that I want. obviously you can adjust the media query list to suite your project mobile fist etc.

But it will jin multiple queries for you as I believe you're asking for.

$size__site_content_width: 1024px;
    
/* Media Queries */ Not necessarily correct, edit these at will 
$media_queries : (
    'mobile'    : "only screen and (max-width: 667px)",
    'tablet'    : "only screen and (min-width: 668px) and (max-width: $size__site_content_width)",
    'desktop'   : "only screen and (min-width: ($size__site_content_width + 1))",
    'retina2'   : "only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)",
    'retina3'   : "only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)",
    'landscape' : "screen and (orientation:landscape) ",    
    'portrait'  : "screen and (orientation:portrait) "
    );

@mixin for_breakpoint($breakpoints) {
    $conditions : ();
    @each $breakpoint in $breakpoints {
        // If the key exists in the map
        $conditions: append(
            $conditions,
            #{inspect(map-get($media_queries, $breakpoint))},
            comma
        );
    }

    @media #{$conditions} {
        @content;
    }
}

Use it like this in your scss:

#masthead {
    background: white;
    border-bottom:1px solid #eee;
    height: 90px;
    padding: 0 20px;
    @include for_breakpoint(mobile desktop) {
        height:70px;
        position:fixed;
        width:100%;
        top:0;
    }
}

Then this will compile to:

#masthead { 
    background: white;
    border-bottom: 1px solid #eee;
    height: 90px;
    padding: 0 20px;
}

@media only screen and (max-width: 667px), only screen and (min-width: 1025px) {
    #masthead {
        height: 70px;
        position: fixed;
        width: 100%;
        top: 0;
    }
}

Upvotes: 28

Michael Durrant
Michael Durrant

Reputation: 96594

$small: 300px;
$medium: 900px;

@media screen and (min-width: $small) and (max-width: $medium) {
    //css code
}

Upvotes: 6

John Paulo Rodriguez
John Paulo Rodriguez

Reputation: 1410

Check this out for scss. https://github.com/Necromancerx/media-queries-scss-mixins

Usage

.container {
    @include xs {
        background: blue;
    }

    @include gt-md {
        color: green
    }
}

Demo: Stackblitz

Based on Angular FlexLayout MediaQueries

Upvotes: 13

pguetschow
pguetschow

Reputation: 5337

$small: 300px;
$medium: 900px;

.smth {
  //some CSS
  @media screen and (max-width: $small) {
    //do Smth
  }
  @media screen and (min-width: $medium) {
    //do Smth
  }
}

Something like this?

Upvotes: 154

Related Questions