Why SASS improves responsive workflows - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a SASS variable for a breakpoint.

SASS

$breakpoint: [1];

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

A768px

Bmargin

Ccolor

Dfont-size

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names instead of pixel values

Forgetting the unit 'px'

The variable $breakpoint stores the pixel value for responsive design.

2fill in blank

medium

Complete the code to create a mixin for a media query using the breakpoint variable.

SASS

@mixin respond-to { @media (max-width: [1]) { @content; } }

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

A$breakpoint

B$color

C$margin

D$font-size

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated variables

Omitting the dollar sign

The mixin uses $breakpoint variable to set the max-width for the media query.

3fill in blank

hard

Fix the error in the code to apply styles inside the respond-to mixin.

SASS

.container { @include respond-to { width: [1]; } }

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

A100px

Bnone

Cauto

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel widths that don't adapt

Using invalid CSS values

Using 100% makes the container take full width on smaller screens.

4fill in blank

hard

Fill both blanks to create a nested media query inside a class using the respond-to mixin.

SASS

.menu { display: flex; [1] respond-to { flex-direction: [2]; } }

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

A@include

Brow

Ccolumn

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names instead of @include

Using 'row' which is default flex direction

The @include directive calls the mixin, and column stacks menu items vertically on small screens.

5fill in blank

hard

Fill all three blanks to create a responsive card style with padding and font size inside a media query.

SASS

.card { padding: [1]; font-size: [2]; @include respond-to { padding: [3]; } }

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

A2rem

B1.5rem

C1rem

D3rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using same padding for both places

Using inconsistent units

The card has larger padding and font size normally, and smaller padding inside the media query for small screens.