Почему применяется только один медиа запрос через Sass?

Question

[Айдар Иванов]

Применятся только 1 медиа запрос не зависимо от разрешения экрана . Пробовал менять местами и так и этак и все равно так же.
https://github.com/Aidar9500/untitled2.git
a{
font-size: 14px;

@include mq-small {
font-size: 18px;
}
@include mq-small-up {
font-size: 20px;
}
@include mq-medium {
font-size: 22px;
}
@include mq-medium-up {
font-size: 24px;
}
@include mq-larger {
font-size: 20px;
}

}
в файле /*_setting.scss*/

$larger: 768px;

$medium: 480px;
$small: 320px;

@mixin mq-larger {
media (min-width: $larger) {
@content;
}
}
@mixin mq-medium-up {
media (min-width: $medium) {
@content;
}
}
@mixin mq-medium {
media (min-width: $medium) and (max-width: $larger - 1px) {
@content;
}
}
@mixin mq-small-up {
media (min-width: $small) {
@content;
}
}
@mixin mq-small {
media (min-width: $small) and (max-width: $medium - 1px){
@content;
}
}

Comments

[WapSter]

А разве применяя media (min-width:) структура не должна идти от меньшего к большему?

Answer 1

[Арсений Матыцин]

1. Этот запрос последний и надо действительно его поднять.
2. SASS\SCSS в чистом виде обычно не используется, а конвертируется в CSS, если это так, то до этой операции все изменения ни к чему не приведут.

Comments

[Айдар Иванов]

@include mq-larger {
font-size: 20px;
}
@include mq-medium-up {
font-size: 24px;
}
@include mq-medium {
font-size: 22px;
}
@include mq-small {
font-size: 18px;
}
@include mq-small-up {
font-size: 20px;
}

[Арсений Матыцин]

Айдар Иванов, на это скрине отрабатывает этот запрос @include mq-small-up
Если честно вникнуть нет ни времени, ни особого желания, поэтому может что-то важное и упустил. Но тут на поверхности каскадность. Это значит, если грубо, то работать будет последнее и самое близкое к наиболее точному селектору.

Советую посмотреть на то, как собираю я и bootstrap. У меня чистый SASS и на вид попроще. Но работает. А у бута надо для общего понимания посмотреть в другие исходники. Они рядом.

После — сравнить и найти, где именно идет нарушение каскада.

[Айдар Иванов]

Арсений Матыцин, благодарю

Answer 2

[Вероника]

Так как у вас пишутся медиа запросы от меньшего к большему (mobile-first), то в таком порядке они и должны

@mixin mq-small {
  media (min-width: $small) and (max-width: $medium - 1px){
    @content;
  }
}
@mixin mq-small-up {
  media (min-width: $small) {
    @content;
  }
}
@mixin mq-medium {
  media (min-width: $medium) and (max-width: $larger - 1px) {
    @content;
  }
}
@mixin mq-medium-up {
  media (min-width: $medium) {
    @content;
  }
}
@mixin mq-larger {
  media (min-width: $larger) {
    @content;
  }
}

То есть в таком же порядке, как вы вызываете миксины, вы должны их прописать