Using Media queries with Sass

14 / Oct / 2014 by Rajan Shergill 2 comments

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!

FOUND THIS USEFUL? SHARE IT

comments (2)

  1. Rajan Shergill

    Hi Rizban,
    Yes it is possible and very simple.
    For Example you have two Div’s, Div 1 which is on right side and Div 2 which is on left side on a desktop, So
    – Place your Div 2 first in your HTML Page giving it Float Right.
    – Place your Div 1 after Div 2 giving it Float Left.
    – Giving 100% width for both the Div’s in Media Queries.
    [css]
    <style type="text/css">
    *{margin:0; padding:0;}
    div{ float:left; width:50%; height:300px; position:relative}
    .left{ background:red; }
    .right{ background:blue;float:right}
    @media only screen and (min-width: 320px) and (max-width:568px){div{width:100%;}}
    </style>
    [/css]
    [html]
    <body>
    <div class="right">second div</div>
    <div class="left">First div</div>
    </body>
    [/html]

    Hope it helps you.

    Reply
  2. Rizban Ahmad

    Hello Sir,
    I have a web page showing left div and right div (both of 50%) and i want to show right div then left div on mobile device. how it can be possible?

    Reply

Leave a Reply to Rizban Ahmad Cancel reply

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