Should mixins be declared before anything else?

Question

On a SCSS/SASS code, should mixins be declared at the very first before other changes to the CSS? I usually do this, but I'm not sure if there is a benefit to this practice.

Answer 1

The only rule you should respect to avoid errors on transpilation is to have a mixin below what's using it in the codebase.

Say you have this mixin:

@mixin media-breakpoint-up($name) {
  @media all and (min-width: map-get($breakpoints, $name)) {
    @content;
  }
}

And this code:

html {
  font-size: 1.1rem;

  @include media-breakpoint-down(md) {
    font-size: 1rem;
  }
}

For the above example to work, media-breakpoint-up should be imported or declared before the @include part. That's all you need to respect. Beyond that, you organize your code as you want.

Though, to not think of the order of things, people often import the mixins at the top of the entry file.