ghoullier
9/8/2013 - 8:34 PM

Efficent responsive design approche using Sass

Efficent responsive design approche using Sass

// Media Queries Encapsulation

// Variables
$desktop-width: 980px;
$tablet-width: 768px;
// Mixins
@mixin desktop () {
  @media all and (min-width: $desktop-width) {
    @content;
  }
}
@mixin tablet () {
  @media all and (min-width: $tablet-width) and (max-width: ($desktop-width - 1px)) {
    @content;
  }
}
@mixin mobile () {
  @media all and (max-width: ($tablet-width - 1px)) {
    @content;
  }
}