Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── sass:math module ──────────────────────────────────────────────────────────

@use 'sass:math';

// ── math.div() replaces / for division ────────────────────────────────────────

// Old (deprecated, triggers warning):
// $half: 100px / 2;

// Modern:
$half      : math.div(100px, 2);          // 50px
$column    : math.percentage(math.div(4, 12));  // 33.333%
$line-height: math.div(24px, 16px);       // 1.5 (unitless ratio)

// ── math.pow for exponential scales ──────────────────────────────────────────

$type-scale-ratio : 1.25;  // Major Third
$base-size        : 1rem;

@for $i from -2 through 6 {
    $level: if($i >= 0, $i + 1, $i);
    .text-scale-#{$level} {
        font-size: $base-size * math.pow($type-scale-ratio, $i);
    }
}

// ── Trigonometry for creative CSS ────────────────────────────────────────────

// Generate polygon points using sin/cos
@function polygon-points($n, $r: 50%) {
    $points: '';
    @for $i from 0 through $n - 1 {
        $angle : math.div(2 * math.$pi * $i, $n) - math.div(math.$pi, 2);
        $x     : 50% + $r * math.cos($angle);
        $y     : 50% + $r * math.sin($angle);
        $points: $points + '#{$x} #{$y}';
        @if $i < $n - 1 { $points: $points + ', '; }
    }
    @return $points;
}

// ── Unit checking in functions ────────────────────────────────────────────────

@function strip-unit($number) {
    @if not math.is-unitless($number) {
        @return math.div($number, $number * 0 + 1);
    }
    @return $number;
}

@function to-rem($px, $base: 16px) {
    @return math.div(strip-unit($px), strip-unit($base)) * 1rem;
}

h1 { font-size: to-rem(36px); }   // 2.25rem
h2 { font-size: to-rem(28px); }   // 1.75rem