Typography scale generation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the base font size in a typography scale

In a Sass typography scale, what role does the base font size variable usually play?

A It controls the line height for all text elements.

B It sets the starting font size from which all other sizes scale proportionally.

C It specifies the font family used throughout the site.

D It defines the maximum font size allowed in the scale.

💡 Hint

Think about what 'base' means in scaling something up or down.

The base font size is the reference point for the entire scale. Other font sizes are calculated relative to it, ensuring consistent sizing.

📝 Syntax

intermediate

Correct Sass syntax for a modular scale function

Which Sass function correctly calculates a modular scale font size given a step and a ratio?

SASS

@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
  @return $base * math.pow($ratio, $step);
}

A

@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
  @return $base * math.pow($ratio, $step);
}

B

@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
  @return $base * $ratio ^ $step;
}

C

@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
  @return $base * ($ratio ** $step);
}

D

@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
  @return $base * pow($ratio, $step);
}

💡 Hint

Sass math functions require the math module and use math.pow for exponentiation.

In modern Sass, math functions like pow are accessed via the math module, so math.pow($ratio, $step) is correct.

❓ rendering

advanced

Visual output of a typography scale with negative steps

Given this Sass code snippet, what font size will be applied to the class .small-text? @use 'sass:math'; $base-size: 1rem; $ratio: 1.2; @function modular-scale($step) { @return $base-size * math.pow($ratio, $step); } .small-text { font-size: modular-scale(-2); }

A 1.2 rem

B 0.833 rem

C 0.694 rem

D 1.44 rem

💡 Hint

Calculate 1rem * (1.2 ^ -2).

Using the formula: 1rem * (1.2 ^ -2) = 1rem * (1 / 1.44) ≈ 0.694 rem.

❓ selector

advanced

Selecting headings with a typography scale in Sass

Which Sass selector correctly applies different modular scale font sizes to all heading levels h1 through h6 using a loop?

SASS

@use 'sass:math';
$base-size: 1rem;
$ratio: 1.25;
@function modular-scale($step) {
  @return $base-size * math.pow($ratio, $step);
}

A

@for $i from 1 through 6 {
  h#{$i} {
    font-size: modular-scale($i);
  }
}

B

@each $i in 1 2 3 4 5 6 {
  h#{$i} {
    font-size: modular-scale($i);
  }
}

C

@each $i in 1 2 3 4 5 6 {
  h#{$i} {
    font-size: modular-scale(6 - $i);
  }
}

D

@for $i from 1 through 6 {
  h#{$i} {
    font-size: modular-scale(6 - $i);
  }
}

💡 Hint

Heading 1 is usually the largest, so it should have the highest step.

Using @for from 1 to 6 and calculating 6 - $i assigns the largest font size to h1 and smaller sizes to higher heading numbers.

❓ accessibility

expert

Ensuring accessible typography scale with Sass

Which Sass approach best supports accessibility by maintaining readable font sizes across devices when using a modular scale?

A Use relative units like rem for base size and apply modular scale with media queries adjusting the base size.

B Use fixed pixel sizes for all font sizes to keep consistency.

C Apply modular scale only once without adjusting for different screen sizes.

D Use em units for base size and avoid media queries to keep font sizes static.

💡 Hint

Think about how users zoom or change device sizes and how font sizes should adapt.

Using rem units allows font sizes to scale with user settings. Adjusting the base size with media queries ensures readability on different devices, supporting accessibility.

Practice

1. What is the main purpose of a typography scale in Sass?

easy

A. To create random font sizes for variety

B. To add animations to text elements

C. To change colors of text dynamically

D. To keep font sizes balanced and consistent across a website

Solution

1. Step 1: Understand typography scale concept

   A typography scale is used to keep font sizes balanced and consistent, avoiding random sizes.

2. Step 2: Identify the correct purpose

   Options A, C, and D describe unrelated tasks like randomness, colors, or animations, which are not the purpose of typography scales.

3. Final Answer:

   To keep font sizes balanced and consistent across a website -> Option D

4. Quick Check:

   Typography scale = balanced font sizes [OK]

Hint: Typography scales keep font sizes consistent and balanced [OK]

Common Mistakes:

• Thinking typography scales create random sizes
• Confusing typography scale with color or animation features
• Assuming typography scales are for layout spacing

2. Which of the following is the correct Sass function syntax to calculate a typography scale size with base size $base, ratio $ratio, and step $step?

easy

A. font-size: $base * $ratio ^ $step;

B. font-size: $base * math.pow($ratio, $step);

C. font-size: $base * ($ratio ** $step);

D. font-size: $base * pow($ratio, $step);

Solution

1. Step 1: Recall Sass math function syntax

   Sass uses the math module for functions like pow(), so the correct syntax is math.pow($ratio, $step).

2. Step 2: Check each option

   font-size: $base * pow($ratio, $step); uses pow() without math module, which is invalid. font-size: $base * $ratio ^ $step; uses ^ which is not Sass syntax. font-size: $base * ($ratio ** $step); uses ** which is not Sass syntax for exponentiation. font-size: $base * math.pow($ratio, $step); correctly uses math.pow($ratio, $step).

3. Final Answer:

   font-size: $base * math.pow($ratio, $step); -> Option B

4. Quick Check:

   Sass math.pow() = correct syntax [OK]

Hint: Use math.pow() with math module for exponent in Sass [OK]

Common Mistakes:

• Using ^ for exponent instead of math.pow()
• Forgetting to use math module prefix
• Trying pow() without math module

3. Given the Sass code:

$base: 1rem;
$ratio: 1.25;
$step: 3;
$size: $base * math.pow($ratio, $step);

What is the computed value of $size in rem units?

medium

A. 1.953125rem

B. 3.125rem

C. 2.4414rem

D. 4.0rem

Solution

1. Step 1: Calculate math.pow($ratio, $step)

   1.25 raised to the power 3 = 1.25 * 1.25 * 1.25 = 1.953125.

2. Step 2: Multiply by $base

   $base is 1rem, so 1rem * 1.953125 = 1.953125rem.

3. Step 3: Check options carefully

   1.953125rem shows 1.953125rem which matches calculation, but 2.4414rem shows 2.4414rem which is 1.25^4, not ^3.

4. Final Answer:

   1.953125rem -> Option A

5. Quick Check:

   1rem * 1.25^3 = 1.953125rem [OK]

Hint: Calculate ratio power step, then multiply by base size [OK]

Common Mistakes:

• Calculating power incorrectly (e.g., 1.25^4 instead of ^3)
• Multiplying base size by wrong power result
• Confusing rem units with pixels

4. Identify the error in this Sass function for typography scale:

@function scale($base, $ratio, $step) {
  @return $base * pow($ratio, $step);
}

medium

A. Missing math module prefix for pow function

B. Incorrect parameter names

C. Using @return instead of return

D. Function syntax is invalid in Sass

Solution

1. Step 1: Check Sass math function usage

   In Sass, pow() is inside the math module, so it must be called as math.pow().

2. Step 2: Verify other syntax

   Parameter names are fine, @return is correct Sass syntax, and function syntax is valid.

3. Final Answer:

   Missing math module prefix for pow function -> Option A

4. Quick Check:

   Use math.pow() not pow() alone [OK]

Hint: Always prefix pow() with math. in Sass functions [OK]

Common Mistakes:

• Calling pow() without math prefix
• Confusing @return with return keyword
• Thinking function syntax is wrong

5. You want to generate a typography scale in Sass that skips step 0 and starts from step 1, doubling the font size each step from a base of 1rem. Which Sass code correctly generates the size for step 3?

hard

A. $base: 1rem;
$ratio: 2;
$step: 3;
$size: $base * math.pow($ratio, $step + 1);

B. $base: 1rem;
$ratio: 2;
$step: 3;
$size: $base * math.pow($ratio, $step);

C. $base: 1rem;
$ratio: 2;
$step: 3;
$size: $base * math.pow($ratio, $step - 1);

D. $base: 1rem;
$ratio: 2;
$step: 3;
$size: $base * math.pow($ratio, 0);

Solution

1. Step 1: Understand skipping step 0

   Skipping step 0 means step 1 corresponds to power 0, so power = step - 1.

2. Step 2: Apply formula for step 3

   For step 3, power = 3 - 1 = 2, so size = 1rem * 2^2 = 4rem.

3. Step 3: Check options

   $base: 1rem; $ratio: 2; $step: 3; $size: $base * math.pow($ratio, $step - 1); uses $step - 1, correctly skipping step 0. $base: 1rem; $ratio: 2; $step: 3; $size: $base * math.pow($ratio, $step); uses $step directly, which would give 8rem for step 3. Options A and D are incorrect powers.

4. Final Answer:

   $base * math.pow($ratio, $step - 1); -> Option C

5. Quick Check:

   Skip step 0 by subtracting 1 from step [OK]

Hint: Subtract 1 from step to skip zero step in scale [OK]

Common Mistakes:

• Not adjusting step to skip zero
• Using step directly causing wrong size
• Confusing power calculation with addition