SASS не компилируется в порядке медиазапроса

Question

Итак, я сделал следующие миксины и использую их в определенном порядке, но они не работают так, как предполагалось.

@mixin mediaX {
  @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
    @content;
  }
}

//iPhone 6,7,8
@mixin media6 {
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
    @content;
  }
}

//iPhone 6,7,8 Plus
@mixin media6Plus {
  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
    @content;
  }
}

//iPhone 5 and 5S
@mixin media5 {
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    @content;
  }
}

, и используется следующее

@include mediaX {
  .navigation {
    text-align: justify;
  }
}

@include media6Plus {
  .navigation {
    text-align: justify;
  }
}

@include media6 {
  .navigation {
    text-align: justify;
  }
}

@include media5 {
  .navigation {
    text-align: left;
  }
}

Похоже, что только media5 только отражает, может кто-то объяснить, что не так и почему он работает так?

Answer 1

Конфликт правил в зависимости от размеров экрана в указанных выше медиазапросах.Следовательно, последнее является единственным правилом, которое применяется по умолчанию.Я никогда не писал медиа-запрос на основе устройства, которое я обычно пишу на основе размера экрана.Убедитесь, что вы пишете медиазапрос, основываясь на размерах экрана, а не на устройствах, поскольку медиазапрос может выбирать только размеры экрана, а не устройства.

Создайте медиазапросы, подобные этим.

//screen size 1200px and above
@mixin media6 {
    @media only screen and (min-device-width: 1200px) {
        @content;
        }
    }
//media query between 1200px and 992px
@mixin media6Plus {
  @media only screen and (min-device-width: 992px) and (max-device-width: 
  1199px) {
    @content;
  }
}

And then use them like this 
@include media6 {
  .navigation {
    text-align: justify;
  }
}

@include media6Plus {
  .navigation {
    text-align: left;
  }
}