如何在SCSS混合宏中检测父选择器&的指向？

首先纠正你代码里的小问题：调用混合宏要用@include，不是@import（后者是用来导入SCSS文件的），修正后的调用代码应该是：

body {
  @include x;
}

button {
  @include x;
}

回到你的需求，完全可以在混合宏里检测父选择器&的指向，核心是利用SCSS的@if条件判断，直接将&和目标选择器做比较：

单一父选择器的精准匹配 #

如果只需要精准匹配body作为父选择器，混合宏可以这么写：

@mixin x() {
  // 判断当前父选择器是否为body
  @if & == body {
    // 这里写针对body的特殊逻辑
    background: #f5f5f5;
    line-height: 1.5;
  } @else {
    // 其他选择器调用时的通用逻辑
    padding: 0.5rem 1rem;
    border-radius: 4px;
  }
}

复杂父选择器的包含检测 #

如果你的父选择器是嵌套结构（比如.page-container body），想要检测父选择器中是否包含body，可以用index()函数判断：

@mixin x() {
  // 判断父选择器中是否包含body
  @if index(&, body) {
    // 包含body时的处理
    color: #333;
  } @else {
    // 非body相关选择器的处理
    border: 1px solid #ddd;
  }
}

这样就能根据调用混合宏的父选择器类型，执行不同的逻辑了。

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