Media Queries in SCSS.

I was searching for how we can use media query in scss. I found several ways to use it but I wanted something which is interesting any easy to use as well. Then I found this and felt I found something interesting and easy to use. In this we have used mixins, declaring variables and including them as well. It’s pretty awesome.

$break-small: 320px;
$break-large: 1024px;

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $break-large) { @content; }
  }
}

.section1 {
  float: left;
  width: 250px;
  @include respond-to(handhelds) { width: 100% ;}
  @include respond-to(medium-screens) { width: 125px; }
  @include respond-to(wide-screens) { float: none; }
}

Output

.section1{
  float: left;
  width: 250px;
}
@media only screen and (max-width: 320px) {
  .section1{
    width: 100%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
  .section1{
    width: 125px;
  }
}
@media only screen and (min-width: 1024px) {
  .section1{
    float: none;
  }
}

Written by Ranjeet Jha

Ranjeet Jha

Hey there! My name is Ranjeet. I’m a Web Designer & Front-end Developer. I design, code, build & promote all things HTML5, CSS3, JavaScript & jQuery. In this blog you will find solutions of day to day problems faced by you.. Enjoy Coding..

Leave a Reply

Your email address will not be published. Required fields are marked *