Mathematical Operators

Mathematical Operators

SASS supports full mathematical operations in your stylesheets. Calculate widths, spacing, font sizes, and more without leaving your CSS.

Basic Operations

$base: 16px;

.container {
    width: 100% - 40px;           // Subtraction (note: only works with calc() in CSS)
    padding: $base * 2;            // 32px
    margin-bottom: $base + 4px;    // 20px
    font-size: $base;
}

// ⚠️ For mixed units (% and px), use CSS calc():
.container {
    width: calc(100% - 40px);      // ✅ Works in browser
}

Operators Available

Operator	Example	Result
+ Addition	10px + 5px	15px
- Subtraction	20px - 8px	12px
* Multiplication	10px * 3	30px
/ Division	math.div(30px, 3)	10px
% Modulo	15px % 4	3px

Division in Modern SASS

// ⚠️ The / operator is being deprecated for division!

// Old way (still works but will be removed):
$half: 100px / 2;  // 50px — but SASS warns about this

// New way — use math.div():
@use 'sass:math';

$half: math.div(100px, 2);   // 50px ✅
$third: math.div(960px, 3);  // 320px ✅
$ratio: math.div(16, 9);     // 1.7778 ✅

Calculating Spacing Scale

$base-spacing: 8px;

$spacing-xs: $base-spacing;                    // 8px
$spacing-sm: $base-spacing * 2;                // 16px
$spacing-md: $base-spacing * 3;                // 24px
$spacing-lg: $base-spacing * 4;                // 32px
$spacing-xl: $base-spacing * 6;                // 48px
$spacing-2xl: $base-spacing * 8;               // 64px

.card {
    padding: $spacing-md;
    margin-bottom: $spacing-lg;
}

.section {
    padding: $spacing-xl 0;
}

Typography Scale

@use 'sass:math';

$base-font: 16px;
$scale-ratio: 1.25;  // Major third

$font-sm: math.div($base-font, $scale-ratio);    // 12.8px
$font-base: $base-font;                           // 16px
$font-md: $base-font * $scale-ratio;              // 20px
$font-lg: $base-font * $scale-ratio * $scale-ratio; // 25px
$font-xl: $base-font * $scale-ratio * $scale-ratio * $scale-ratio; // 31.25px

h1 { font-size: $font-xl; }
h2 { font-size: $font-lg; }
h3 { font-size: $font-md; }
body { font-size: $font-base; }
small { font-size: $font-sm; }

Percentage Calculations

@use 'sass:math';

// Converting px to percentage
$container: 1200px;
$sidebar: 300px;

.sidebar {
    width: math.div($sidebar, $container) * 100%;  // 25%
}

.content {
    width: math.div($container - $sidebar, $container) * 100%;  // 75%
}

SASS Math Functions

@use 'sass:math';

math.ceil(4.2);       // 5
math.floor(4.8);      // 4
math.round(4.5);      // 5
math.abs(-10);        // 10
math.max(10, 20, 5);  // 20
math.min(10, 20, 5);  // 5
math.percentage(0.25); // 25%

Unit Rules

// ✅ Same units — works fine
10px + 5px   // 15px
20% - 5%     // 15%

// ✅ Unitless × unit — takes the unit
3 * 10px     // 30px

// ❌ Incompatible units — error!
10px + 5%    // Error! Can't mix px and %
// Use calc() instead: calc(10px + 5%)

Key Takeaways

• SASS supports +, -, *, math.div(), and % operators
• Use math.div() instead of / for division (modern SASS)
• Math with same units works; mixed units require CSS calc()
• Build spacing and typography scales with math for consistency
• Built-in math functions: ceil, floor, round, abs, max, min, percentage