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"

Mixins

view source

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

Classes that are useful for controlling what gets printed. You must mix +print-utilities into your print stylesheet and +print-utilities(screen) into your screen stylesheet. Note: these aren't semantic.