I wrote this piece of code to make any breakpoint to the users choice:
@mixin breakpoint($media) {
$max-width: 0;
@if($media == 'phones') {
$max-width: $phone-medium;
} @else if ($media == 'monitors') {
$max-width: $screen-medium;
//etc etc etc
} @else if($media > 0) {
$max-width: $media;
}
@media only screen and (max-width: $max-width) {
@content;
}
}
This function comes with these variables:
//Phone width sizes
$phone-small: 480px;
$phone-medium: 768px;
//Screen widths
$screen-small: 1024px;
$screen-medium: 1280px;
$screen-big: 1920px;
This can be used by typing:
@include breakpoint('phones') {
....
}
or
@include breakpoint(450px) {
....
}
Is there any better way to do this?