Number types and units in SASS - Browser Rendering Trace

Render Flow - Number types and units

Parse SASS file

↓

Identify number literals

↓

Check units on numbers

↓

Convert units if needed

↓

Compile to CSS with units

↓

Output CSS file

The SASS compiler reads the code, recognizes numbers and their units, processes any unit conversions, and outputs CSS with proper units for the browser to render.

Render Steps - 4 Steps

Code Added:$width: 10px;

Before

[ ]

→

After

[__________]  (empty box placeholder, no size yet)

Defined a variable with a number and px unit, but no visible box yet.

🔧 Browser Action:Stores variable for later use, no rendering change.

Code Sample

A blue box with width in pixels, height in rem units, and padding in em units.

SASS

<div class="box">Box</div>

SASS

$width: 10px;
$height: 5rem;
$padding: 2em;

.box {
  width: $width;
  height: $height;
  padding: $padding;
  background-color: lightblue;
}

Render Quiz - 3 Questions

After applying step 4, what determines the box's height?

A The 2em padding sets height

B The 10px width sets height

C The 5rem unit sets height relative to root font size

D The background color sets height

Common Confusions - 2 Topics

Why does 10px look different from 5rem on different screens?

Pixels are fixed size, rem depends on root font size which can change with user settings or device, so rem scales but px stays constant.

💡 Use rem for scalable layouts, px for fixed sizes.

Why can't I add 10px + 5em directly in SASS?

SASS requires units to be compatible to add; px and em are different units, so you must convert or use compatible units.

💡 Only add numbers with same or compatible units.

Property Reference

Property	Value Example	Unit Type	Visual Effect	Common Use
width	10px	Absolute length	Sets fixed width in pixels	Precise sizing
height	5rem	Relative length	Height relative to root font size	Responsive sizing
padding	2em	Relative length	Padding relative to element font size	Spacing inside element

Concept Snapshot

SASS numbers can have units like px, em, rem. Units affect how sizes scale visually. px is fixed size, em/rem scale with font size. SASS requires compatible units to do math. Use variables to keep units consistent and maintain responsive design.