SCSS的mixin，用于检查身体类别

Question

是否有可能进行混合（在SCSS中），从而检查基于主体类（或父div）添加的样式。

梦想是将其转换为

#logo {
  position: absolute;
  top: 50px;
  left: 20px;
} 

body.admin-bar #logo {

  #logo {
    top: 86px;

    @media screen and (max-width: 782px) {
      top: 92px;
    }
  }
}

...对此

#logo {
  position: absolute;
  @include adminAdjustedTop( 50px );
  left: 20px;
} 

如果adminAdjustedTop具有类body，那么admin-bar混合然后将多余的像素添加到顶部...这样就不会在两个不同的位置描述徽标的位置位置，取决于是否设置了身体类别。

Answer 1

无需混合即可实现此目标，您只需使用parent selector reference &：

#logo {
  position: absolute;
  top: 50px;
  left: 20px; 
  body.admin-bar & {
    top: 86px;
    @media screen and (max-width: 782px) {
      top: 92px;
    }
  }
}