如何在打印預覽頁面上加載打印介質樣式

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