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

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，而是使用@include：

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

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

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