selector-no-redundant-nesting-selector

Disallow redundant nesting selectors (&).

p {
  & a {}
//↑
// This type of selector
}

The following patterns are considered warnings:

p {
  & a {}
}

p {
  & > a {}
}

p {
  & .class {}
}

p {
  & + .foo {}
}

The following patterns are not considered warnings:

p {
  &.foo {}
}

p {
  .foo > & {}
}

p {
  &,
  .foo,
  .bar {
    margin: 0;
  }
}

Options

ignoreKeywords: ["/regex/", /regex/, "string"]

if you are using Less or some other non-SCSS syntax, the warnings can be disabled by using ignoreKeywords option.

For example, you need to ignore the when keyword in less:

{
  rules: {
    'scss/selector-no-redundant-nesting-selector', [true, { ignoreKeywords: ['when'] }],
  },
}

The following patterns are not considered warnings:

 @theme: ~'dark';
p {
  & when (@theme = dark) {
    color: #000;
  }
  & when not(@theme = dark) {
    color: #fff;
  }
}

Conversely, if you do not use the ignoreKeywords option:

{
  rules: {
    'scss/selector-no-redundant-nesting-selector', true,
  },
}

The following patterns are considered warnings:

 @theme: ~'dark';
p {
  & when (@theme = dark) {
    color: #000;
  }
  & when not(@theme = dark) {
    color: #fff;
  }
}