SCSS как писать стили CSS, применимые как для медиа-печати, так и для конкретного случая - PullRequest
Новая
       52

SCSS как писать стили CSS, применимые как для медиа-печати, так и для конкретного случая

0 голосов
/ 26 июня 2019

У меня есть особый случай, когда мой стиль должен применяться как к печатным носителям, так и когда <body> имеет специальный класс для обнаружения, давайте просто назовем этот класс .is-pdf-mode.

В моем SCSS я пытался использовать @content, чтобы избежать повторения CSS, но каким-то образом полученный CSS не генерирует правильный селектор для случая <body>, я не могу использовать селектор & внутри этого миксина. Пока это моя попытка.

SCSS: 

@mixin query-print {
  @media print {
    @content;
  }

  .body.is-pdf-mode {
    @content;
  }
}

.box {
  width: 200px;
  height: 200px;
  background: lightsalmon;
  margin: 15px;

  @include query-print {
    background: green;
  }
}

@media print {
// Default styling only apply for print
html,
body,
page[size="A4"] {
    padding:0px;
    margin:0px;
    width: 210mm;
    height: 297mm;
}

body {
  -webkit-print-color-adjust: exact !important;
  zoom: 100%;
}

}

HTML: 

<div class="body">
  <div class="box">
    hello
  </div>
</div>

<div class="body is-pdf-mode">
  <div class="box">
    hello
  </div>
</div>

Я понимаю, что если написать .body.is-pdf-mode внутри этого миксина, это будет означать .box .body.is-pdf-mode, вместо этого должно быть .body.is-pdf-mode .box. Итак, мой вопрос: как правильно написать CSS в этой ситуации?

Попытка кодепа: https://codepen.io/DieByMacro/pen/xoLNpE

Обновление 1: переписать мой CSS внутри query-print mixin:

Если я напишу так: 

.box {
  width: 200px;
  height: 200px;
  background: lightsalmon;
  margin: 15px;
}

@include query-print {
.box {
  background: green;
}
}

Очевидно, что это будет работать, но в моем реальном проекте мы использовали @include mixin внутри селектора. Применение этой стратегии означает переписывание большого количества селекторов, поэтому я думаю, что это будет моим последним средством, когда других вариантов нет.

Спасибо

1 Ответ

1 голос
/ 26 июня 2019

Вы можете использовать @at-root и &: 

@mixin query-print {
  @media print {
    @content;
  }

  @at-root.body.is-pdf-mode #{&} {
    @content;
  }
}

В вашем примере он вернет: 

@media print {
  .box {
    background: green;
  }
}

.body.is-pdf-mode .box {
  background: green;
}

SASS @ корневая документация

...