Save media query in a variable

Question

Is it possible to save a media query as a variable?

This does not work:

$max: @media (max-width: 980px) and (min-width: 768px); 

I'm not looking for how to save max-width and min-width, but an entire line.

Answer 1

Use something like this

  @mixin respondTo($media) { @if $media == smallScreen { @media only screen and (max-width: $screenSmall - 1) { @content; } } @else if $media == mediumScreen { @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) { @content; } } @else if $media == largeScreen { @media only screen and (min-width: $screenXlarge) { @content; } } } 

Then you can do something like the following:

 .products { @include respondTo(smallScreen) { width: 300px; } @include respondTo(mediumScreen) { width: 700px; } } 

Answer 2

As in Sass 3.2, you can save the media query in a variable as follows:

 $bp-small: "(min-width: 30em)"; @media #{$bp-small} { .foo { color: red; } }