Применение медиа-запроса в Sass if-check не работает - PullRequest
Новая
       10

Применение медиа-запроса в Sass if-check не работает

0 голосов
/ 21 февраля 2019

У меня есть эта крошечная вспомогательная функция 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 пикселей.Проблема в том, что он работает некорректно.

Что происходит, когда он применяет медиа-запрос ко всем различным классам полей, не имеет значения, равен он 2 или 90 пикселям.Это не работает: 

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

Может кто-нибудь помочь мне понять, почему?

1 Ответ

0 голосов
/ 21 февраля 2019

В вашем утверждении @if есть 2 небольшие ошибки:

  1. Вы используете интерполяцию #{nth($space-values, $i)}, что означает использование только для генерации контента
  2. У вас естьнеправильное условие $side == top or 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;
    }
}
...