My SASS file is giving me trouble with the media query. The background color changes properly, but the text remains unaffected. I would greatly appreciate your assistance with this issue. Below is the HTML and SASS code snippets in question:
<!-- HTML -->
<div class="mobile_only">Mobile only</div>
<div class="tablet_only">Tablet only</div>
<div class="desktop_only">Desktop only</div>
<div class="mobile_and_tablet">Mobile and Tablet</div>
<div class="tablet_and_desktop">Tablet and Desktop</div>
<div class="all_views">All views</div>
<!-- SASS -->
@mixin mq($display, $breakpoint)
@media #{$display} and #{$breakpoint}
@content
$mq_phone: "(max-width: 400px)"
$mq_tablet: "(min-width: 401px) and (max-width: 700px)"
$mq_phone_tablet: "(max-width: 700px)"
$mq_laptop: "(min-width: 701px)"
$mq_tablet_laptop: "(min-width: 401px)"
+mq("screen",$mq_phone)
body
background: red
.mobile_only
display: block
+mq("screen",$mq_phone_tablet)
.mobile_and_tablet
display: block
+mq("screen",$mq_tablet)
body
background: blue
.tablet_only
display: block
+mq("screen",$mq_tablet_laptop)
.tablet_and_desktop
display: block
+mq("screen",$mq_laptop)
body
background: green
.desktop_only
display: block