SASS：@media查询不起作用

Question

在我的SASS文件中，媒体查询无法正常工作。它确实会改变背景颜色，但无法更改文本。感谢您的时间和帮助。这是HTML和SASS代码：

<!-- 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

Answer 1

您需要添加颜色属性....

＆＃13;

＆＃13;

@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
        color:  white
    .mobile_only
        display: block
+mq("screen",$mq_phone_tablet)
    .mobile_and_tablet
        display: block
+mq("screen",$mq_tablet)
    body
        background: blue
        color:  white
    .tablet_only
        display: block
+mq("screen",$mq_tablet_laptop)
    .tablet_and_desktop
        display: block
+mq("screen",$mq_laptop)
    body
        background: green
        color:    white
    .desktop_only
        display: block

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;