React & SCSS - печать 2 разных страниц с 2 разными размерами с помощью @Media Query - PullRequest
Новая
       23

React & SCSS - печать 2 разных страниц с 2 разными размерами с помощью @Media Query

0 голосов
/ 05 декабря 2018

Используемые технологии: React и SCSS

Цель: распечатать страницу A размером: 1000 пикселей и страницу B размером: 288 пикселей.

Ожидаемый результат: страница A & B имеет размер 1000 пикселей1000px и 288px на 288px соответственно при оформлении с использованием @media print и печати с использованием window.print ().

Фактический результат: и страница A, и B имеют размер 1000px на 1000px при стилизации с использованием @media print и распечатаны с использованиемwindow.print ().

Я попытался разделить файл .scss и его класс, но результат все тот же.Вот мой код, когда я объединяю классы внутри 1 .scss файла. 

@mixin band($name) {
  @if $name == yellow {
    @media print {
        size: 1000px 1000px;
      background-color: $name;
    }
  } @else if $name == white {
    @media print {
      size: 288px 288px;
      background-color: $name;
    }
  } @else {
    font-size: 20px
  }
}

.band-white {
    @include band($name: white);
}

.band-black {
    @include band($name: yellow);
}

Любая помощь приветствуется.Спасибо!

...