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

Question

是否可以制作mixin(在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;
} 

所以adminAdjustedTopmixin然后将额外的像素添加到顶部,如果body有类admin-bar......那么徽标的定位没有在两个不同的地方描述,这取决于设置或不设置的体类.

Answer 1

没有mixin来实现这个目标,你可以简单地使用父选择器引用 &:

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