Cacher is the code snippet organizer for pro developers

// magento2 breakpoints
@screen__xxs: 320px;    @media screen and (max-width:@screen__xxs) {
@screen__xs: 480px;     @media screen and (max-width:@screen__xs) {
@screen__s: 640px;      @media screen and (max-width:@screen__s) {
@screen__m: 768px;      @media screen and (max-width:@screen__m) {
@screen__l: 1024px;     @media screen and (max-width:@screen__l) {
@screen__xl: 1440px;    @media screen and (max-width:@screen__xl) {

// NOTE: .media-width cannot be nested (and I can't get it to work)! 
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  your styles !important
}

// magento RWD breakpoints (responsive web design theme for Magento 1)
$bp-xsmall: 479px;    @include bp(max-width, $bp-xsmall) {
$bp-small:  599px;    @include bp(max-width, $bp-small) {
$bp-medium: 770px;    @include bp(max-width, $bp-medium) {
$bp-large:  979px;    @include bp(max-width, $bp-large) {
$bp-xlarge: 1199px;   @include bp(max-width, $bp-xlarge) {

// SASS format (Magento 1)
@include bp(max-width, $bp-medium) {
/* These styles will only display on viewports smaller than or equal to 770px */
}
@include bp(min-width, $bp-medium+1) {
/* These styles will only display on viewports larger than or equal to 771px (770px + 1px) */
}


// generic breakpoints
@media screen and (max-width:1024px) {
}

@media screen and (max-width:768px) {
}

@media screen and (max-width:480px) {
}

@media screen and (max-width:320px) {
}