Print stylesheet organization in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use a separate print stylesheet in Sass?

Which of the following best explains the main reason to organize a separate print stylesheet in Sass?

A To optimize styles specifically for printed pages, improving readability and layout when printing.

B To apply animations and transitions only when printing documents.

C To reduce the overall file size of the main stylesheet by removing unused styles.

D To enable JavaScript to dynamically change styles during printing.

💡 Hint

Think about how printed pages differ from screens in style needs.

Print stylesheets focus on adjusting layout and colors for paper, making printed content clear and readable. This is why they are separated.

📝 Syntax

intermediate

Correct syntax for print media query in Sass

Which option shows the correct way to write a print media query in Sass to style printed pages?

SASS

@media print {
  body {
    font-size: 12pt;
  }
}

A

@media only print {
  body {
    font-size: 12pt;
  }
}

B

@media screen and print {
  body {
    font-size: 12pt;
  }
}

C

@media (print) {
  body {
    font-size: 12pt;
  }
}

D

@media print {
  body {
    font-size: 12pt;
  }
}

💡 Hint

Remember the standard media query syntax for print.

The correct syntax for targeting print media is @media print { ... }. Other options are either invalid or target multiple media types.

❓ layout

advanced

Effect of print styles on page layout

Given this Sass print stylesheet snippet, what will be the visual effect when printing?

@media print {
  nav, footer {
    display: none;
  }
  main {
    width: 100%;
  }
}

A Navigation and footer will be hidden, but main content width remains unchanged.

B Navigation and footer will be visible, but main content width will shrink.

C Navigation and footer will be hidden, and main content will expand to full page width.

D Only footer will be hidden; navigation remains visible with reduced width.

💡 Hint

Consider what happens when elements are set to display none and width 100%.

Setting display: none hides nav and footer from print. Setting width: 100% on main makes it fill the available page width.

❓ accessibility

advanced

Accessibility considerations in print stylesheets

Which practice improves accessibility when organizing print stylesheets in Sass?

A Ensure high contrast colors and readable font sizes for printed text.

B Use only light gray text to save printer ink.

C Hide all images to reduce printing time.

D Use very small fonts to fit more content on each page.

💡 Hint

Think about what makes printed text easy to read for everyone.

High contrast and readable font sizes help users with visual impairments read printed content easily. Other options reduce readability or accessibility.

❓ selector

expert

Which selector targets only printed links in Sass?

In a Sass print stylesheet, which selector correctly styles only links when printing?

A @media print { a:hover { color: black; } }

B @media print { a { color: black; text-decoration: underline; } }

C @media print { a:link { color: black; } }

D @media print { a:visited { color: black; } }

💡 Hint

Consider which pseudo-classes apply in print media.

In print media, pseudo-classes like :hover do not apply. The base a selector styles all links for print.