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;
}
}