Skip to content

Instantly share code, notes, and snippets.

@danmartin
Created December 10, 2012 16:40
Show Gist options
  • Save danmartin/4251697 to your computer and use it in GitHub Desktop.
Save danmartin/4251697 to your computer and use it in GitHub Desktop.
Sass Breakpoints Mixin
@mixin breakpoint($point) {
@if $point == sm-max {
@media (max-width: 460px) { @content; }
}
@else if $point == md-max {
@media (max-width: 800px) { @content; }
}
@else if $point == lg-max {
@media (max-width: 1024px) { @content; }
}
@else if $point == sm-min {
@media (min-width: 320px) { @content; }
}
@else if $point == md-min {
@media (min-width: 768px) { @content; }
}
@else if $point == lg-min {
@media (min-width: 960px) { @content; }
}
}
.wrapper {
@include lego;
width: 1024px;
@include breakpoint(sm-max) { width: 320px; }
@include breakpoint(md-max) { width: 768px; }
@include breakpoint(lg-max) { width: 960px; }
@o-henry
Copy link

o-henry commented Mar 16, 2020

Awesome!!!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment