用于SCSS的混入，用于检查body-class

Question

有没有可能做一个混入(在SCSS中)，根据body-class (或父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;
} 

因此，如果body具有类admin-bar，则adminAdjustedTop mixin会将额外的像素添加到顶部...因此，徽标的位置不是在两个不同的地方描述的，这取决于是否设置了body-classes。

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