Why Number types and units in SASS? - Purpose & Use Cases

The Big Idea

Discover how simple units can save your layout from chaos and make your designs shine everywhere!

The Scenario

Imagine you are designing a webpage and you want to set the width of a box. You write the width as just a number, like 100, without any unit.

Or you try to mix different units like pixels and percentages manually for different elements.

The Problem

Without specifying units, browsers don't know if 100 means pixels, ems, or something else, causing your layout to break.

Mixing units manually is confusing and can lead to inconsistent sizes, making your page look messy on different screens.

The Solution

Number types and units in Sass let you write numbers with units clearly, like 100px or 50%, so the browser understands exactly what you mean.

Sass also helps you do math with these units safely, so you can combine and convert sizes without errors.

Before vs After

✗ Before

width: 100; // Missing unit, causes issues
height: 50%;
margin: 10px + 5; // Mixing units manually

✓ After

width: 100px;
height: 50%;
margin: 10px + 5px; // Units match, math works

What It Enables

You can create flexible, consistent layouts that adapt well to different screen sizes and devices.

Real Life Example

When building a responsive navigation bar, using units like rem and % with Sass math ensures the bar looks good on phones, tablets, and desktops without extra work.

Key Takeaways

Number types with units tell browsers exactly how to size elements.

Sass helps you do math with units safely and clearly.

This makes your designs flexible and consistent across devices.