渲染Sass时使用了什么顺序？

Question

我有一个看起来像这样的组件：

=footer
    padding: 0 8%
    .footer-navigation
        padding-top: base(5)
        padding-bottom: base(3.5)
        margin: 0 auto
        @include flexbox
        @include justify-content(flex-end)
        .footer-navigationSection
            margin-right: base(3.5)
            +font-size($small)
        .footer-navigationSection:last-child
            margin-right: 0
        .footer-navigationLink
            display: block
            &:first-of-type
                margin-top: base(.5)
        .footerLogotype
            flex-grow: 1
    @media #{$maxWidth}
        .footer-navigationSection
            +font-size(16px)

由于某种原因，媒体查询在主查询之前呈现，如下所示：

/* line 23, ../sass/style.sass */
.footer {
  padding: 0 8%; }
  @media screen and (max-width: 1130px) {
    /* line 52, ../sass/grid.sass */
    .footer .footer-navigationSection {
      font-size: 16px;
      line-height: 24px;
      position: relative;
      top: 6.4px; } }
  /* line 55, ../sass/grid.sass */
  .footer .footer-navigation {
    padding-top: 120px;
    padding-bottom: 84px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end; }
    /* line 61, ../sass/grid.sass */
    .footer .footer-navigation .footer-navigationSection {
      margin-right: 84px;
      font-size: 18px;
      line-height: 24px;
      position: relative;
      top: 5.7px; }
    /* line 64, ../sass/grid.sass */
    .footer .footer-navigation .footer-navigationSection:last-child {
      margin-right: 0; }
    /* line 66, ../sass/grid.sass */
    .footer .footer-navigation .footer-navigationLink {
      display: block; }
      /* line 68, ../sass/grid.sass */
      .footer .footer-navigation .footer-navigationLink:first-of-type {
        margin-top: 12px; }
    /* line 70, ../sass/grid.sass */
    .footer .footer-navigation .footerLogotype {
      flex-grow: 1; }

为什么呢？我能做些什么呢？