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

Posted 2023-03-06

【中文标题】如何在打印预览页面上加载打印媒体样式

【英文标题】：How to load print media styles on a print preview page

【发布时间】：2017-04-08 01:42:25

【问题描述】：

我的 (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。

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

【参考方案1】：

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

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


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


@media print 
  @include .print-styles;