I like this approach;
$tablet-width: 768px;
$desktop-width: 1024px;
@mixin tablet {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$desktop-width}) {
@content;
}
}
p {
font-size: 16px;
@include tablet {
font-size: 18px;
}
@include desktop {
font-size: 20px;
}
}
It is easier to read but one down side is it can increase the file size.
Here is the detailed post; https://davidwalsh.name/write-media-queries-sass