如果检查不起作用，则在Sass中应用媒体查询

我有一个小小的Sass助手功能：

$sides: (top, bottom, left, right);
$space-values: (0, 2, 5, 10, 15, 17, 20, 22, 30, 40, 50, 60, 70, 80, 90, 100, 120);

@each $side in $sides {
  @for $i from 1 through length($space-values) {
   .m-#{str-slice($side, 0, 1)}-#{nth($space-values, $i)} {
    margin-#{$side}: #{nth($space-values, $i)}px;
    margin-#{$side}: rem-calc(nth($space-values, $i), $base-font-size);
    // Apply media-query if space-value is above 80
    @if #{nth($space-values, $i)} > 80 and $side == top or bottom {
     @include media-breakpoint-down(sm) {
       margin-#{$side}: 60px;
     }
  }
}

它所做的是迭代空间值并创建一组边距类以应用于标记。但是，如果超出80像素，我想在较小的设备上使边距（顶部和底部）默认为60像素。问题是它不能正常工作

它将媒体查询应用于所有不同的保证金类别，不管是2px还是90px。这不起作用：

  @if #{nth($space-values, $i)} > 80 and $side == top or bottom {
     @include media-breakpoint-down(sm) {
       margin-#{$side}: 60px;
     }
  }

---

有人能帮我理解为什么吗？

如果您的

@if

语句中有两个小错误：

您正在使用插值

{n（$space values，$i）}

，这意味着仅用于生成内容

您有不正确的条件

$side==top或bottom

，您的意思是“如果

$size

是

top

或

bottom

”，但由于遗漏了条件，其实际含义是“如果

$size

是

top

或字符串

bottom

是解析为

true

”的值 由于上一个错误，您的整个情况总是分解为

true

。正确的条件是：

@if nth($space-values, $i) > 80 and ($side == top or $side == bottom) {
    @include media-breakpoint-down(sm) {
        margin-#{$side}: 60px;
    }
}