Using Media queries with Sass

While starting work on redesign of an existing site, I was suggested to give CSS preprocessors like Less/SCSS a try.  I was thrilled by the features of SCSS and started woking on it and I would like to share my experience about writing media queries in SCSS with you guys.

In SCSS, we can use if/else condition like any other programming language. We’ll be using this power of SCSS to write very verbose media queries which are much more readable than the usual CSS media queries. The end result will be a @mixin which will allow us to “name” media queries.

1. Name the mixin

The @mixin feature of SCSS allows us to define “function-like” structures which are reusable and we’ll use this functionality to create a reusable piece of CSS styling. A mixin needs a name at the very least. Let’s name the mixin as “devices” since we’ll use it to differentiate between devices:
[html]
@mixin devices($media) {
…
}[/html]

Currently, this mixin does not do anything but accepts an “argument” which specifies the type of media we’re targeting.

2. Output device specific media queries

The next piece of magic to be added to this mixin is to output specific media queries based on the type of media that we pass to the mixin.

[html]@mixin devices($media) {
@if $media == mobile {
@media only screen and (min-width:320px) and (max-width:767px) {
…
}
} @else if $media == ipad {
@media only screen and (min-width:768px) and (max-width:991px) {
…
}
}
}[/html]

3. Add the actual CSS

Now the final part of the puzzle is the actual CSS to be used on each of the devices. SCSS allows you to use a special directive named “@content” which allows us to pass a content block into a mixin.

So, I can write my mixin like this:

[html]@mixin devices($media) {
@if $media == mobile {
@media only screen and (min-width:320px) and (max-width:767px) {
@content;
}
} @else if $media == ipad {
@media only screen and (min-width:768px) and (max-width:991px) {
@content;
}
}
}[/html]

That’s it! Now, to specify styles for devices I can simply write:

[html]//Specifies style for mobile devices
@include devices(mobile) {
#header {
.logo {width: 135px;}
}
}

//Specifies style for ipads
@include devices(ipad) {
#header {
.logo {width: 185px;}
}
}[/html]

The final output for this CSS is as follows:

[html]@media only screen and (min-width: 320px) and (max-width: 767px) {
#header .logo {
width: 135px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#header .logo {
width: 185px;
}
}
[/html]

Cool and simple! Enjoy!