SASS %extends inside descendant and child selectors.

extends-childs-selectors-output.css

[data-bar="global"] [data-foo="local"] > .class1 {
  background: blue;
}

[data-foo="local"] [data-bar="global"] .class2, [data-bar="global"] [data-foo="local"] .class2 {
  background: blue;
}

extends-childs-selectors-rendered.html

<div></div>

extends-childs-selectors.html

<div></div>

extends-childs-selectors.scss

/*




*/
%child-selector {
  [data-foo="local"] > & {
    background: blue;
  }
}

.class1 {
  [data-bar="global"] & {
    @extend %child-selector;
  }
}

%descendant-selector {
  [data-foo="local"]  & {
    background: blue;
  }
}

.class2 {
  [data-bar="global"] & {
    @extend %descendant-selector;
  }
}