Print stylesheet organization in SASS - Mini Project: Build & Apply

Print Stylesheet Organization with Sass

📖 Scenario: You are creating a website that looks great on screen and also prints nicely on paper. To do this, you will organize your Sass code to separate screen styles from print styles. This helps keep your styles clean and easy to manage.

🎯 Goal: Build a Sass file that defines screen styles and print styles separately using @media queries. You will create variables for colors, write styles for the body and headings for screen, then add print-specific styles that hide navigation and change text color for printing.

📋 What You'll Learn

Create a Sass variable $primary-color with the value #3498db.

Write styles for body and h1 for screen display using @media screen.

Write print-specific styles inside @media print that hide nav and set body text color to black.

Organize the Sass code clearly separating screen and print styles.

💡 Why This Matters

🌍 Real World

Websites often need to look good on screen and print well on paper. Organizing styles with media queries helps maintain clean code and better user experience.

💼 Career

Front-end developers must write maintainable CSS/Sass that supports multiple devices and media, including print. This skill is essential for professional web development.

1

Create a Sass variable for the primary color

Create a Sass variable called $primary-color and set it to #3498db.

SASS

# Your code here

Hint

Use the syntax $variable-name: value; to create a variable in Sass.

2

Add screen styles using @media screen

Write a @media screen block. Inside it, style the body with font-family: Arial, sans-serif; and set the h1 color to $primary-color.

SASS

$primary-color: #3498db;

// Your code here

Hint

Use @media screen { ... } to target screen styles.

3

Add print styles using @media print

Write a @media print block. Inside it, hide the nav element by setting display: none; and set the body text color to black.

SASS

$primary-color: #3498db;

@media screen {
  body {
    font-family: Arial, sans-serif;
  }
  h1 {
    color: $primary-color;
  }
}

// Your code here

Hint

Use @media print { ... } to write styles that apply only when printing.

4

Organize and finalize the print stylesheet

Ensure your Sass code clearly separates screen and print styles by having two distinct @media blocks: one for screen and one for print. Confirm the variable $primary-color is declared at the top.

SASS

$primary-color: #3498db;

@media screen {
  body {
    font-family: Arial, sans-serif;
  }
  h1 {
    color: $primary-color;
  }
}

@media print {
  nav {
    display: none;
  }
  body {
    color: black;
  }
}

// Review your code for clear organization

Hint

Check that your variable is at the top and that screen and print styles are in separate @media blocks.