Fluid spacing with calculations in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a base spacing variable in Sass.

SASS

$base-spacing: [1];

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

A1rem

B10px

C5em

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed units like px which do not scale well.

Using percentages for spacing which can cause unexpected results.

Using 1rem as base spacing is common for fluid spacing because it scales with the root font size.

2fill in blank

medium

Complete the code to calculate a fluid margin using the base spacing variable.

SASS

margin: $base-spacing [1] 2;

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

A/

B+

C-

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of multiplication.

Using division which reduces spacing.

The * operator multiplies the base spacing by 2 to get double the spacing.

3fill in blank

hard

Fix the error in the calculation to create a fluid padding value.

SASS

padding: calc(#{$base-spacing} [1] 0.5rem);

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

A*

B+

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using multiplication inside calc() without unit compatibility.

Using subtraction which reduces padding unexpectedly.

The + operator correctly adds 0.5rem to the base spacing inside calc().

4fill in blank

hard

Fill both blanks to create a fluid gap that scales between 1rem and 2rem based on viewport width.

SASS

gap: calc([1] + ([2] - 1rem) * (100vw / 100rem));

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

A1rem

B2rem

C3rem

D0.5rem

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping min and max values.

Using values outside the desired range.

The gap starts at 1rem and scales up to 2rem as viewport width increases.

5fill in blank

hard

Fill all three blanks to create a fluid font size that scales from 1rem to 1.5rem between 320px and 1280px viewport widths.

SASS

font-size: calc([1] + ([2] - [3]) * ((100vw - 320px) / (1280px - 320px)));

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

A1rem

B1.5rem

C320px

D1280px

Attempts:

3 left

💡 Hint

Common Mistakes

Using pixel units for font sizes instead of rem.

Mixing up viewport width values.

The font size starts at 1rem and scales up to 1.5rem as viewport width grows from 320px to 1280px.