Typography scale generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a base font size variable in Sass.

SASS

$base-font-size: [1];

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

A20px

B16px

C1.5rem

D12pt

Attempts:

3 left

💡 Hint

Common Mistakes

Using rem units instead of pixels for the base size.

Using an unusually large or small font size.

The base font size is commonly set in pixels for precise control. Here, 16px is a standard base size.

2fill in blank

medium

Complete the code to create a Sass function that calculates the font size by multiplying the base size by a scale factor.

SASS

@function font-scale($factor) {
  @return $base-font-size [1] $factor;
}

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 would reduce the size.

The font size is calculated by multiplying the base font size by the scale factor, so the operator must be *.

3fill in blank

hard

Fix the error in the Sass map that defines the scale steps with their corresponding factors.

SASS

$scale-steps: (
  small: 0.875,
  base: 1,
  large: [1]
);

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

A'1.25'

B1,25

C1.25

Dlarge

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a number.

Using a comma instead of a dot for decimals.

The scale factor must be a number without quotes or commas. 1.25 is the correct decimal number.

4fill in blank

hard

Fill both blanks to create a Sass mixin that applies a font size from the scale map using the scale key.

SASS

@mixin apply-font-size($size) {
  font-size: font-scale($scale-steps[1]$size[2]);
}

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

A[

B]

C(

D)

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of square brackets.

Forgetting to close the bracket.

To access a value in a Sass map, use square brackets [] around the key.

5fill in blank

hard

Fill all three blanks to create a responsive typography scale using a CSS clamp function with min, preferred, and max font sizes.

SASS

font-size: clamp([1], [2], [3]);

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

A1rem

B2vw + 1rem

C2rem

Dcalc(1rem + 2vw)

Attempts:

3 left

💡 Hint

Common Mistakes

Using an expression without calc() for preferred size.

Swapping min and max values.

The clamp function needs a minimum size 1rem, a preferred size using calc(1rem + 2vw) for responsiveness, and a maximum size 2rem.