css - 如何在打印预览页面上加载打印媒体样式

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 不允许在 @media 指令中使用 @extend。

实现此目标的最佳方法是什么？

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;
}