How to be with mixins that adds nesting?

[krutoo]

Hi, im trying to add stylelint-config-standard-scss to my project.

In my project i have utils.scss with mixins like:

@mixin my-mixin {
  display: block; // 1) some rules here
  border: 1px solid red;

  &:hover {
    border: 1px solid green;
  }
}

Previously I wrote style for my component like this:

@use '../utils.scss';

.my-component {
  @include utils.my-mixin; // 2) using mixin
  display: flex; // 3) override some rules from mixin
}

The new warning in Sass 1.77.7 tells me that i should move include after top level rules rules.

But I need to keep mixin on the top because of overriding rules.

---

After upgrade to Sass 1.77.7 i rewrote code like this:

@use '../utils.scss';

.my-component {
  @include utils.my-mixin; // 2) using mixin
};

.my-component {
  display: flex; // 3) override some rules from mixin
}

But now stylelint-config-standard-scss tells that I should has only one .my-component selector.

---

Can someone suggest: how can I properly rewrite code in this situation according to stylelint-config-standard-scss and new Sass nesting rules?

[kristerkari]

Thanks @krutoo !

I haven't had time to look into how the Sass depractation affects the different configs, or in your case, mixin use.

I understood the change correctly, then you have to either wrap your overrides with & { }, or then you would need to have the @include after the overrides (in your case this would not work).

Here is the documentation about the change: https://sass-lang.com/documentation/breaking-changes/mixed-decls/

[krutoo]

@kristerkari with & { } i have error from stylelint-scss:

Unnecessary nesting selector (&) (scss/selector-no-redundant-nesting-selector)Stylelintscss/selector-no-redundant-nesting-selector

[kristerkari]

@krutoo oh yeah, that's something in the selector-no-redundant-nesting-selector rule that needs to be fixed still.

In the meantime you can just disable that rule in that file using:

// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector