ℹ️ Select 'Choose Exercise', or randomize 'Next Random Exercise' in selected language.

Choose Exercise:
Timer 00:00
WPM --
Score --
Acc --
Correct chars --

SCSS Mixin for Responsive Typography Scaling

SCSS

Goal -- WPM

Ready
Exercise Algorithm Area
1/*

2* Mixin for fluid typography.

3* Scales font-size between a minimum and maximum value based on viewport width.

4*/

5@mixin fluid-typography($property, $min-size, $max-size, $min-width, $max-width) {

6// Ensure valid input: min-size should not be greater than max-size

7@if $min-size > $max-size {

8@warn "Minimum font size (#{$min-size}) cannot be greater than maximum font size (#{$max-size}).";

9@return;

10}

11

12// Ensure valid input: min-width should not be greater than max-width

13@if $min-width > $max-width {

14@warn "Minimum viewport width (#{$min-width}) cannot be greater than maximum viewport width (#{$max-width}).";

15@return;

16}

17

18// Calculate the slope (m) of the linear scaling function

19$slope: ($max-size - $min-size) / ($max-width - $min-width);

20

21// Calculate the intercept (b) of the linear scaling function

22// font-size = m * viewport-width + b

23// b = font-size - m * viewport-width

24$intercept: $min-size - $slope * $min-width;

25

26// Apply the base font-size at the minimum width

27#{$property}: $min-size;

28

29// Use a media query to apply the scaling above the minimum width

30@media (min-width: #{$min-width}) {

31// Calculate the font-size for the current viewport width

32// The calc() function in CSS handles the linear interpolation.

33// We need to ensure the result does not exceed the max-size.

34#{$property}: clamp(

35$min-size,

36#{$intercept + $slope * 100vw},

37$max-size

38);

39}

40

41// Apply the maximum font-size at or above the maximum width

42@media (min-width: #{$max-width}) {

43#{$property}: $max-size;

44}

45}

46

47/*

48* Example usage of the fluid-typography mixin.

49*/

50.hero-title {

51@include fluid-typography('font-size', 2rem, 4rem, 320px, 1200px);

52line-height: 1.2;

53}

54

55.body-text {

56@include fluid-typography('font-size', 1rem, 1.5rem, 480px, 1024px);

57line-height: 1.6;

58}

59

60/* Edge case: invalid input for min/max sizes */

61.invalid-size-example {

62@include fluid-typography('font-size', 4rem, 2rem, 320px, 1200px);

63}

64

65/* Edge case: invalid input for min/max widths */

66.invalid-width-example {

67@include fluid-typography('font-size', 2rem, 4rem, 1200px, 320px);

68}
Algorithm description viewbox

SCSS Mixin for Responsive Typography Scaling

Algorithm description:

This SCSS mixin, `fluid-typography`, dynamically scales a CSS property (typically `font-size`) between a defined minimum and maximum value. It calculates the appropriate value based on the current viewport width, ensuring a smooth transition. This is commonly used for responsive text that adjusts gracefully across different screen sizes, improving readability and user experience.

Algorithm explanation:

The `fluid-typography` mixin implements a linear interpolation algorithm to scale a CSS property. It first calculates the slope and intercept of the line that defines the scaling relationship between the minimum and maximum font sizes and their corresponding minimum and maximum viewport widths. The core logic uses `clamp()` in CSS, which is a modern function that sets a value within a given range. `clamp(min, preferred, max)` ensures the `preferred` value is used if it's between `min` and `max`, otherwise it defaults to `min` or `max`. The mixin also includes checks for invalid input where minimum values exceed maximum values, preventing incorrect calculations and issuing warnings. The time complexity is O(1) as it involves a fixed number of calculations. The space complexity is also O(1) as it doesn't use dynamic data structures proportional to input size.

Pseudocode:

DEFINE MIXIN fluid-typography(property, min_size, max_size, min_width, max_width)
  IF min_size > max_size THEN WARN and RETURN
  IF min_width > max_width THEN WARN and RETURN

  CALCULATE slope = (max_size - min_size) / (max_width - min_width)
  CALCULATE intercept = min_size - slope * min_width

  SET property = min_size

  IF viewport_width >= min_width THEN
    CALCULATE scaled_value = intercept + slope * viewport_width
    SET property = CLAMP(min_size, scaled_value, max_size)
  END IF

  IF viewport_width >= max_width THEN
    SET property = max_size
  END IF
END MIXIN