Mixin для SCSS, который проверяет класс тела - PullRequest
0 голосов
/ 06 января 2019

Можно ли создать миксин (в 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;
} 

Так что adminAdjustedTop mixin затем добавил дополнительные пиксели в верхнюю часть, если body имел класс admin-bar ... Так, чтобы расположение логотипа не было описано в двух разных местах, в зависимости от того, какое тело -классы установлены или нет.

1 Ответ

0 голосов
/ 06 января 2019

Для достижения этой цели миксин не требуется, вы можете просто использовать ссылку на родительский селектор &:

#logo {
  position: absolute;
  top: 50px;
  left: 20px; 
  body.admin-bar & {
    top: 86px;
    @media screen and (max-width: 782px) {
      top: 92px;
    }
  }
} 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...