$min-width: 768px; $medium-width: 1024px; $desktop-width: 1280px; $max-width: 2560px; @mixin breakpoint($size: desktop) { @if ($size == tablet) { @media (max-width: $medium-width) { @content; } } @else if ($size == lttablet) { @media (max-width: $min-width - 1) { @content; } } @else if ($size == gttablet) { @media (min-width: $medium-width + 1) { @content; } } @else if ($size == ltdesktop) { @media (max-width: $desktop-width - 1) { @content; } } @else if ($size == desktop) { @media (min-width: $medium-width) and (max-width: $max-width) { @content; } } @else if ($size == smalldesk) { @media (max-width: 1185px) { @content; } } @else { @content; } }