Software Programming

Kunuk Nykjaer

Working with Sass and Media Queries

leave a comment »


If you want responsive design and use Sass you could do this. Setup your break points
(this post is similar to my Less post, but with Sass this time).

Setup Sass and Media Queries

/* Setup */
$device-extra-small-width: 480px;
$device-small-width: 768px;
$device-medium-width: 992px;
$device-large-width: 1200px;

@mixin device-extra-small {
 @media (min-width: #{$device-extra-small-width}) { @content; }
}
@mixin device-small {
 @media (min-width: #{$device-small-width}) { @content; }
}
@mixin device-medium {
 @media (min-width: #{$device-medium-width}) { @content; }
}
@mixin device-large {
 @media (min-width: #{$device-large-width}) { @content; }
}

When you want to apply responsive design for a component you structure the Media Queries like this.

Html

<div class='responsive-component'>
  sass and media queries example
</div>

Sass

/* Usage */
.responsive-component {
  
   /* default is device-extra-extra-small */
   font-size: 100%;
   background: tomato;

   @include device-extra-small {
    font-size: 120%;
    background: aqua;
  }
   @include device-small {
    font-size: 140%;
    background: orange;
  }
  @include device-medium {
    font-size: 160%;
    background: lime;
  }
  @include device-large {
    font-size: 180%;
    background: yellow;
  }
}

Here is a demo. Edit on Codepen, resize the browser horizontally and see how the content changes.

Reference reading:

Advertisements

Written by kunuk Nykjaer

March 15, 2015 at 2:14 pm

Posted in Css

Tagged with

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: