Почему компиляция Sass игнорирует порядок определения свойств, если они изменяются в медиа-запросах ⇐ CSS

[Anonymous]

Если у меня есть следующее правило scss:

Код: Выделить всё

.hero-wrapper{
padding: g.$padding-main;
@include r.medium {
padding: calc(g.$padding-main / 2);
}
@include r.small {
padding: calc(g.$padding-main / 4);
}
padding-top: 0;
}

включает такие простые примеси

Код: Выделить всё

@mixin small() {
@media (max-width: 568px) {
@content;
}
}

Тогда почему мой отступ переопределяется, как только в моем браузере вступает в силу медиа-запрос? Или поставьте вопрос по-другому: почему scss не знает, что он должен применить свойство, как оно определено, после медиа-запроса. В скомпилированном CSS мы видим, что он переопределяется.

Код: Выделить всё

.hero-wrapper {
padding:3rem;
padding-top:0;
}
@media (max-width:768px) {
.hero-wrapper {
padding:1.5rem
}
}
@media (max-width:568px) {
.hero-wrapper {
padding:.75rem
}
}

Могу ли я что-нибудь сделать, чтобы обеспечить более интуитивное поведение, или мне следует просто переопределять верхнюю часть отступа в каждом запросе?


Подробнее здесь: https://stackoverflow.com/questions/797 ... f-theyre-c