SASS父选择器使用问题：父类.a包含子元素.b时如何修改父类样式属性

问题结论 #

你写的变量方案不可行，Sass本身没有提供根据子元素存在直接修改父元素样式的能力，不过有两种成熟方案可以实现你的需求。

方案不可行的原因 #

你提供的Sass代码编译后会生成如下CSS选择器：

.a .b .a {
  padding-right: 0;
}

该选择器匹配的是「类名a元素内部的类名b元素内部的类名a元素」，和你需要的「包含类名b子元素的类名a元素」逻辑完全不符，无法命中目标元素。

可行实现方案 #

• 全浏览器兼容方案
  你可以直接在HTML中给包含.b子元素的.a元素额外添加一个标识类，比如has-b，样式写法如下：

  .a {
    padding-right: 16px;
    &.has-b {
      padding-right: 0;
    }
  }
  

  该方案性能最高，没有兼容问题，优先推荐使用。
• 现代浏览器原生方案
  如果你不需要兼容老旧版本浏览器，直接使用CSS原生的:has()伪类即可，目前主流浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）都已经支持该特性：

  .a {
    padding-right: 16px;
    &:has(.b) {
      padding-right: 0;
    }
  }
  

  该写法无需修改HTML，自动匹配所有内部包含.b子元素的.a元素，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Igor Chestnov