Using Sass to write media queries

Posted in Tutorials

Sass can help you do less typing when it comes to writing media queries.

For example, when doing responsive web design, it is common to write CSS that looks like this…

.box {
   padding: 5px;
}
@media (min-width: 500px) {
   .box {
      padding: 50px;
   }
}

You have a padding in the mobile view of 5px. But for devices or desktop with views greater than 500px, we need to change that padding to 50px. That above is a lot of typing to say that.

With Sass, you can write like this …

.box {
  padding: 5px;
  @media (min-width:500px) {
    padding: 50px;
  }
}

It is much more concise. And it reads more intuitively. Afterall, we are only talking about the .box class CSS rule. And within it we have two cases of different padding.

This Sass will resolve into the former CSS shown previously so that the browser will understand it. Try it out at SassMeister.com

---