Sass Mathematics Versus CSS calc(), min(), max(), and clamp()

Sass calculations happen during compilation when the operands can be resolved by Sass. CSS calculations are evaluated by the browser and can use runtime values such as percentages, viewport dimensions, and custom properties.

Use Sass math to derive fixed values from known tokens. Use calc() to combine values that depend on the rendered layout. Use clamp() when a value should grow within a minimum and maximum range, such as fluid typography.

For example, font-size: clamp(1rem, 2vw, 2rem) allows text to scale with viewport width while remaining within the specified limits.

Do not force Sass to calculate values that depend on information unavailable until the browser performs layout.

Build Fluid Typography

@use "sass:math";

$base-font: 1rem;
$heading-scale: 1.5;

.card-title {
  font-size: $base-font * $heading-scale;
}

.hero-title {
  font-size: clamp(2rem, calc(1.2rem + 3vw), 4rem);
}

.content {
  width: calc(100% - 2rem);
  max-width: 72rem;
  margin-inline: auto;
}

💡 The card title uses Sass to calculate a compile-time size. The hero title uses browser-side clamp() and calc() so its size responds to viewport width. The content width also depends on the available layout width. This combination uses each calculation system for its intended purpose.

Knowledge Check

Which approach is best when a font size must respond dynamically to viewport width while remaining bounded?

Sass Mathematics Versus CSS calc(), min(), max(), and clamp()

STAY UPDATED WITH BYTES!