css SASS％在后代和子选择器中扩展。

Posted 2021-05-13

/*




*/
%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;
  }
}

<div></div>

<div></div>

[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;
}