Why does Sass compile seem to ignore definition order of properties if they're changed in media queries

Question

If I have the following scss rule:

.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;
}

the includes being simple mixins like so

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

Then why does my padding-top get overridden as soon as a media query takes effect in my browser? Or pose the question differently, why is the scss not aware it should apply the property as defined, after the media query. We can see in the compiled css that it gets overridden.

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

Is there anything I can do to force a more intuitive behaviour or should I just redefine the padding-top in each query?

Yep that's my question. In my mind it should stay zero but it defo gets overridden once the queries trigger. — rappluk
– rappluk, Commented Oct 22 at 9:59

Amadan · Accepted Answer · 2025-10-22 10:51:21Z

In CSS, padding is a shortcut property. That is, your

padding: calc(g.$padding-main / 2);

is equivalent to

padding-top: calc(g.$padding-main / 2);
padding-right: calc(g.$padding-main / 2);
padding-bottom: calc(g.$padding-main / 2);
padding-left: calc(g.$padding-main / 2);

So yes, padding: 0 is overriding padding-top. SCSS cannot know it is not your intention to override all four properties, when you use the padding shortcut.

If you want to not override it, you could explicitly leave it off, either using

padding-right: calc(g.$padding-main / 2);
padding-bottom: calc(g.$padding-main / 2);
padding-left: calc(g.$padding-main / 2);

or specify inherit for the top value (you can also leave out the left value for brevity, since it will be copied from the right value in the 3-value padding syntax):

padding: inherit calc(g.$padding-main / 2) calc(g.$padding-main / 2);

or you can make the padding-top property non-overridable (though this is generally the Hail-Mary method):

padding-top: 0 !important;

EDIT: I think I slightly missed the point of the question; you were asking why SCSS does not respect the order you wrote your declarations in, right? So here's a trick to get SCSS to do what you want:

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

Collectives™ on Stack Overflow

Why does Sass compile seem to ignore definition order of properties if they're changed in media queries

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related