Media queries in Sass

Question

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?

@cimmanon because If you will not write media query correctly in `SCSS` then you will have specificity problem. — Kheersagar patel, Jan 11 '22 at 14:24

score 141 · Accepted Answer · edited Sep 09 '21 at 21:48

141

$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?

edited Sep 09 '21 at 21:48

allanberry

7,325
6
42
71

answered Apr 30 '16 at 17:23

pguetschow

5,176
6
32
45

This is confusing to me. Now we have the first s.mth which applies to all widths, except for those bigger than $small which get other code unless larger than $medium and then they get third code. I'm unsure why one media line rule couldn't use variables. – Michael Durrant Jul 16 '21 at 23:21
If this is confusing for you, then wouldn't regular CSS media rules also be confusing for you? – Kalnode Aug 28 '23 at 14:41

score 26 · Answer 2 · answered Mar 22 '18 at 06:19

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;
  }
}

From my testing `mobile` and other keys should have their values encapsulated in `unquote("$string")`, example; `unquote("only screen and (max-width: 667px)")`, because the `@media` queries don't take kindly to quotes... or remove the quotes as that didn't seem to pop build errors. Also I was not able to get sass maths to work while defining key:value pares, so it maybe more efficient to assign `$_content_width_plus_one: $size__site_content_width + 1;` and use that for `desktop` `min-width` value. Aside from those two points this answer is beautiful. — S0AndS0, Jan 03 '19 at 06:32
Following S0AndS0's advice, this worked for me: `$size__site_content_width: 1024px; $size__site_content_width_plus_one: 1025px; $media_queries: ( 'mobile': unquote("only screen and (max-width: 667px)"), 'tablet': unquote("only screen and (min-width: 668px) and (max-width: $size__site_content_width)"), 'desktop': unquote("only screen and min-width: $size__size_content_width_plus_one)" )` I also added this for convenience: `@mixin mobile { @include for_breakpoint(mobile) { @content; } }` So then I just do: `@include mobile { padding: 1rem; }` — Raffi, Jul 05 '21 at 12:36
In case it helps someone else find it from the error... Without the `unquote($string: "...")` around each media query, processing a file using this approach was resulting `Error: Expected identifier` with a flag on the `$conditions` variable use in `@media #{$conditions}`. — patridge, May 12 '23 at 04:20

score 11 · Answer 3 · edited Oct 16 '22 at 20:28

11

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

edited Oct 16 '22 at 20:28

upe

1,862
1
19
33

answered Jul 01 '18 at 15:33

John Paulo Rodriguez

1,280
18
21

score 5 · Answer 4 · edited Oct 18 '22 at 06:54

5

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

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

edited Oct 18 '22 at 06:54

upe

1,862
1
19
33

answered Jul 16 '21 at 23:24

Michael Durrant

93,410
97
333
497

Media queries in Sass

4 Answers4