Skip to content

Instantly share code, notes, and snippets.

@benjamincharity
Last active May 29, 2017 16:49
Show Gist options
  • Save benjamincharity/1e3683773be45bc4351929d26b514924 to your computer and use it in GitHub Desktop.
Save benjamincharity/1e3683773be45bc4351929d26b514924 to your computer and use it in GitHub Desktop.
Manage CSS breakpoints via mixin. Sizes based off of Material's breakpoints.
///////////////////////////
//
// Breakpoints Mixin
//
@mixin bp($point) {
@if $point == 'layout-xs' {
@media (max-width: 599px) { @content; }
}
@if $point == 'layout-gt-xs' {
@media (min-width: 600px) { @content; }
}
@if $point == 'layout-sm' {
@media (min-width: 600px) and (max-width: 959px) { @content; }
}
@if $point == 'layout-gt-sm' {
@media (min-width: 960px) { @content; }
}
@if $point == 'layout-md' {
@media (min-width: 960px) and (max-width: 1279px) { @content; }
}
@if $point == 'layout-gt-md' {
@media (min-width: 1280px) { @content; }
}
@if $point == 'layout-lg' {
@media (min-width: 1280px) and (max-width: 1919px) { @content; }
}
@if $point == 'layout-gt-lg' {
@media (min-width: 1920px) { @content; }
}
@if $point == 'layout-xl' {
@media (min-width: 1920px) { @content; }
}
}
// Use
.foo {
width: 100%;
@include bp('layout-gt-sm') {
width: 33%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment