如何在打印预览页面上加载打印介质样式

Question

我的（Angular 1.x）应用程序中有一个页面，专门用于打印。虽然我的应用程序的打印介质样式应该在用户选择打印时应用，但我希望它们始终应用于这一页（就像打开Chrome的打印介质模拟一样）。

我试图避免在另一个类中复制我的所有打印媒体样式。我曾希望我可以使用SASS继承，如下所示：

.print-styles {
  // all of my print styles here
}

.my-print-page {
  @extend .print-styles;
}

@media print {
  @extend .print-styles;
}

...但是SASS不允许在@extend指令中使用@media。

实现这一目标的最佳方式是什么？

Answer 1

我会回答我自己的问题，以防将来有人偶然发现这个问题。该解决方案非常简单 - 不是使用@extend，而是编写mixin并使用@include：

@mixin print-styles {
  // all of my print styles here
}

.my-print-page {
  @include .print-styles;
}

@media print {
  @include .print-styles;
}