Skip to content

Update SCSS rules around mixin location given impending Sass changes #528

@tylersticka

Description

@tylersticka

Currently, our lint definition enforces @include functions being at the beginning of a style block. This was a fine rule to settle on, because Sass would always output nested blocks after non-nested properties.

So given this code:

@mixin vertical-rhythm($space: 1lh) {
  > * + * {
    margin-block-start: $space;
  }
}

.example {
  @include vertical-rhythm;
  color: red;
}

The output would be:

.example {
  color: red;
}

.example > * + * {
  margin-block-start: 1lh;
}

But Sass has announced they'll be changing this behavior in a future update. At some point, nested blocks will respect the output order: https://sass-lang.com/documentation/breaking-changes/mixed-decls/

With that change, the order of the output will be reversed:

.example > * + * {
  margin-block-start: 1lh;
}

.example {
  color: red;
}

Because of that, I think we should consider either:

  1. Enforcing @include statements and nesting to come after top-level declarations. This would enforce current behavior.
  2. Remove any @include order enforcement at all, allowing authors to leverage order as they see fit.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions