Compass Print

Control what gets printed. Apply the no-print (or noprint) class to any elements that should be hidden when printing. Apply the print-only class to those elements which should only appear in your printed pages.

The tricky part about print-only is getting the display right when you turn an element back on in the case where both styles are applied. This mixin uses the elements-of-type function to make sure that elements have the correct display value according to the element type.

This file can be imported using: @import "compass/utilities/print"

View the Source for this module on Github.

Mixins

print-utilities($media)

=print-utilities($media: print)
  @if $media == print
    .noprint, .no-print
      display: none
    #{elements-of-type(block)}
      &.print-only
        display: block
    #{elements-of-type(inline)}
      &.print-only
        display: inline
  @else
    .print-only
      display: none

@mixin print-utilities($media: print) {
  @if $media == print {
    .noprint, .no-print {
      display: none; }
    #{elements-of-type(block)} {
      &.print-only {
        display: block; } }
    #{elements-of-type(inline)} {
      &.print-only {
        display: inline; } } }
  @else {
    .print-only {
      display: none; } } }