Adapting from Less to Sass has been my current focus.
I have defined responsive breakpoints in Less variables:
/* Breakpoints */
@break1:~"(max-width: 570px)";
@break2:~"(min-width: 571px) and (max-width: 1002px)";
@break3:~"(min-width: 1003px)";
These breakpoints are being used by various components in the following way:
/*component*/
.main-header{
/*base styles - all devices*/
/*responsive breakpoints for component*/
@media @break1{
/*styles for mobile only (from 0px up to 570px)*/
}
@media @break2{
/*styles for tablet only (from 571px up to 1002px)*/
}
@media @break3{
/*styles for desktop only (from 1003px up to infinite)*/
}
@media @break2, @break3{
/*styles for tablet & desktop (from 571px up to infinite)*/
}
}
I've noticed that there are alternative methods in Sass for handling responsive design breakpoints, but none seem to allow using two breakpoints together like in the Less example above.
@media @break2, @break3{
/*tablet & desktop styles (from 571px up to infinite)*/
}
I am looking for a solution that enables the use of multiple breakpoints together without introducing new ones.