Skip to content

Instantly share code, notes, and snippets.

@hsquareweb
Last active December 29, 2015 13:29
Show Gist options
  • Save hsquareweb/7677907 to your computer and use it in GitHub Desktop.
Save hsquareweb/7677907 to your computer and use it in GitHub Desktop.
Mixins For Responsive Media Queries
// Layout widths
$bp-full: 1200px;
$bp-landscape: 1024px;
$bp-mobile: 767px;
$bp-portrait: 768px;
$bp-wide: 1400px;
$container-width: 1060px;
// Breakpoints
@mixin bp($point) {
@if $point == wide {
@media (max-width: $bp-wide) { @content; }
}
@else if $point == full {
@media (max-width: $bp-full) { @content; }
}
@else if $point == landscape {
@media (max-width: $bp-landscape) { @content; }
}
@else if $point == portrait {
@media (max-width: $bp-portrait) { @content; }
}
@else if $point == mobile {
@media (max-width: $bp-mobile) { @content; }
}
}
@mixin bp-min($viewport) {
@media screen and (min-width: $viewport) {
@content;
}
}
@mixin bp-max($viewport) {
@media screen and (max-width: $viewport) {
@content;
}
}
@mixin vp-min($viewport) {
@media screen and (min-width: $viewport) {
@content;
}
}
@mixin vp-max($viewport) {
@media screen and (max-width: $viewport) {
@content;
}
}
@mixin vp-min-max($v-min, $v-max) {
@media screen and (min-width: $v-min) and (max-width: $v-max) {
@content;
}
}
@mixin device($media) {
@if $media == "tablet" {
@media screen and (max-width: 1024px) {
@content;
}
}
@if $media == "tablet-portrait" {
@media screen and (max-width: 800px) {
@content;
}
}
@if $media == "mobile" {
@media screen and (max-width: 720px) {
@content;
}
}
@if $media == "mobile-portrait" {
@media screen and (max-width: 400px) and (orientation: portrait) {
@content;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment