What is Print stylesheet organization in SASS?

SASSmarkup~5 mins

Print stylesheet organization in SASS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Print stylesheets help make web pages look good when printed on paper. Organizing them well keeps your code clean and easy to update.

You want to make sure your webpage prints without unnecessary colors or backgrounds.

You need to hide navigation menus or buttons when printing.

You want to adjust font sizes and layout for better readability on paper.

You want to add page breaks or control how content flows across pages.

You want to keep your print styles separate from screen styles for easier maintenance.

Syntax

SASS

@media print {
  // print-specific styles here
}

// Or create a separate print stylesheet and link it with:
// <link rel="stylesheet" href="print.css" media="print">

The @media print block applies styles only when printing.

You can also use a separate CSS file linked with media="print" for print styles.

Examples

This example sets font size and removes background color only when printing.

SASS

@media print {
  body {
    font-size: 12pt;
    color: black;
    background: none;
  }
}

This hides navigation and buttons in the printed page.

SASS

@media print {
  nav, .button {
    display: none;
  }
}

Using a separate print stylesheet to set fonts and add page breaks before headings.

SASS

/* In a separate file print.scss */
body {
  font-family: serif;
  line-height: 1.4;
}

@media print {
  h1 {
    page-break-before: always;
  }
}

Sample Program

This example shows a webpage with a navigation bar and a button. When printed, the background becomes white, text turns black, and navigation and button are hidden. The heading starts on a new printed page.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Print Stylesheet Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      color: #333;
      padding: 1rem;
    }
    nav {
      background-color: #007acc;
      color: white;
      padding: 0.5rem;
      margin-bottom: 1rem;
    }
    button {
      background-color: #007acc;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
    @media print {
      body {
        background: white;
        color: black;
        font-size: 12pt;
        padding: 0;
      }
      nav, button {
        display: none;
      }
      h1 {
        page-break-before: always;
      }
    }
  </style>
</head>
<body>
  <nav>Site Navigation</nav>
  <h1>Welcome to the Print Stylesheet Demo</h1>
  <p>This paragraph will appear in black text on white background when printed.</p>
  <button>Click Me</button>
</body>
</html>

OutputSuccess

Important Notes

Always test print styles by using your browser's print preview.

Keep print styles simple for faster printing and better readability.

Use page-break-before and page-break-after to control page breaks.

Summary

Print stylesheets make your webpage look good on paper.

Use @media print or separate print CSS files to organize print styles.

Hide unnecessary elements and adjust fonts and layout for printing.