How to load print media styles on a print preview page

Question

I have a page in my (Angular 1.x) application that is expressly for printing. While my application's print media styles should and do apply when the user opts to print, I would like for them to always be applied on this one page (sort of as if you turned on Chrome's print media emulation).

I'm trying to avoid duplicating all of my print media styles within another class. I had hoped that I could use SASS inheritance, like this:

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

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

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

... but SASS doesn't allow the use of @extend inside of an @media directive.

What's the best way to achieve this?

Answer 1

I'll answer my own question, in case someone stumbles upon this in the future. The solution is obnoxiously simple - instead of using @extend, write a mixin and use @include:

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

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

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