Question

我有这个小小的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;
     }
  }
}

它的作用是对空间值进行迭代，并创建一堆要在标记中应用的边距类。但是，我想在较小的设备上将页边距（顶部和底部）默认设置为60像素（如果超过80像素）。问题是它无法正常工作。

会发生什么，它将媒体查询应用于所有不同的边距类，不管是2px还是90px。这不起作用：

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

有人可以帮助我理解为什么吗？

Answer 1

您的@if语句中有2个小错误：

您正在使用插值#{nth($space-values, $i)}，该插值仅用于生成内容
您的条件$side == top or bottom不正确，意思是“如果$size是top或bottom”，但是由于缺少条件，其实际含义是“如果{{1 }}是$size或字符串top是解析为bottom“的值。

由于最后一个错误，您的整个状况始终会分解为true。正确的条件是：

true

在Sass if-check中应用媒体查询不起作用

1 个答案: