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"
=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.