Print stylesheet organization in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a print media query in Sass.

SASS

@media [1] {
  body {
    font-size: 12pt;
  }
}

Drag options to blanks, or click blank then click option'

Aprint

Bscreen

Call

Dspeech

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'screen' instead of 'print' will apply styles only on screens, not print.

Using 'all' applies styles everywhere, not just print.

The @media print rule targets styles specifically for printed documents.

2fill in blank

medium

Complete the code to hide an element when printing.

SASS

@media print {
  .no-print {
    [1]: none;
  }
}

Drag options to blanks, or click blank then click option'

Aopacity

Bvisibility

Cdisplay

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visibility: none' is invalid CSS.

Using 'opacity: none' is invalid; opacity uses numbers.

Setting display: none; hides the element completely in print.

3fill in blank

hard

Fix the error in the print media query syntax.

SASS

@media [1] {
  p {
    color: black;
  }
}

Drag options to blanks, or click blank then click option'

Aprint

Bprint screen

Cscreen

Dprint;

Attempts:

3 left

💡 Hint

Common Mistakes

Adding a semicolon after 'print' causes a syntax error.

Using 'print screen' is not a valid media type.

The media type should not have a semicolon inside the @media rule.

4fill in blank

hard

Fill both blanks to create a Sass mixin for print styles and include it.

SASS

@mixin [1] {
  @media [2] {
    @content;
  }
}

@include print-styles;

Drag options to blanks, or click blank then click option'

Aprint-styles

Bscreen

Cprint

Dscreen-only

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'screen' instead of 'print' will not target print media.

Mismatch between mixin name and include name causes errors.

The mixin is named print-styles and uses @media print to target print media.

5fill in blank

hard

Fill all three blanks to create a print-specific style for links inside a Sass print mixin.

SASS

@mixin print-styles {
  @media [1] {
    a {
      color: [2];
      text-decoration: [3];
    }
  }
}

Drag options to blanks, or click blank then click option'

Ascreen

Bprint

Cnone

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'screen' media type will not apply styles to print.

Setting text-decoration to 'none' removes underlines.

The media type is 'print'. Links are colored blue and have no underline in print.