Number types and units in SASS - Performance & Optimization

Performance: Number types and units

MEDIUM IMPACT

How CSS number units affect layout calculations and rendering speed.

Defining sizes and spacing in styles

SASS

$width: 50%;
$margin: 1.25rem;
.element {
  width: $width;
  margin: $margin;
}

Using relative units like % and rem allows the browser to calculate sizes more efficiently and adapt to different devices without costly reflows.

📈 Performance GainSingle reflow on resize; better LCP due to flexible layout.

Defining sizes and spacing in styles

SASS

$width: 100px;
$margin: 20px;
.element {
  width: $width;
  margin: $margin;
}

Using fixed pixel units everywhere causes more layout recalculations on different screen sizes and can trigger reflows on resize.

📉 Performance CostTriggers multiple reflows on viewport changes; less flexible for responsive design.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fixed px units	No extra DOM nodes	Multiple reflows on resize	Moderate paint cost	[X] Bad
Relative units (%, rem)	No extra DOM nodes	Single reflow on resize	Lower paint cost	[OK] Good

Rendering Pipeline

Number units in CSS affect the Style Calculation and Layout stages. Fixed units like px require recalculations on viewport changes, while relative units allow smoother recalculations.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout

Core Web Vital Affected

LCP

How CSS number units affect layout calculations and rendering speed.

Optimization Tips

1Prefer relative units like %, rem, and em for sizes and spacing.

2Avoid fixed px units for responsive elements to reduce reflows.

3Use consistent units to help the browser optimize layout calculations.

Performance Quiz - 3 Questions

Which CSS unit type generally causes fewer layout recalculations on viewport resize?

A Fixed units like px

B Relative units like % and rem

C Unitless numbers

D Degrees (deg)

DevTools: Performance

How to check: Record a performance profile while resizing the browser window and observe layout recalculations and reflows.

What to look for: Look for fewer layout events and shorter layout durations indicating better performance with relative units.

Practice

1. Which of the following is a valid Sass number with a unit?

easy

A. 20pixels

B. 12px

C. 15percent

D. 30ptx

Solution

1. Step 1: Understand Sass number units

   Sass supports standard CSS units like px, %, em, rem, etc.

2. Step 2: Check each option for valid unit

   12px uses a valid unit px. Others use invalid or misspelled units.

3. Final Answer:

   12px -> Option B

4. Quick Check:

   Valid CSS unit = 12px [OK]

Hint: Look for standard CSS units like px, %, em, rem [OK]

Common Mistakes:

• Confusing 'percent' with '%' unit
• Using non-standard unit names like 'pixels'
• Misspelling units like 'ptx'

2. Which Sass number is written with correct syntax?

easy

A. 5em

B. 15 rems

C. 20 %

D. 10 px

Solution

1. Step 1: Check spacing between number and unit

   Sass numbers must have no space between the number and unit.

2. Step 2: Validate each option

   5em is correct with no space. Others have spaces or invalid units.

3. Final Answer:

   5em -> Option A

4. Quick Check:

   No space between number and unit = 5em [OK]

Hint: No spaces allowed between number and unit in Sass [OK]

Common Mistakes:

• Adding space between number and unit
• Using plural forms like 'rems'
• Confusing unit syntax with CSS property values

3. What will be the output of this Sass code?

$width: 10px * 2;
.result {
  width: $width;
}

medium

A. width: 10px2;

B. width: 10px;

C. width: 20px;

D. width: 20;

Solution

1. Step 1: Multiply number with unit by a unitless number

   Multiplying 10px by 2 doubles the value but keeps the unit.

2. Step 2: Resulting value and unit

   The result is 20px, which is valid CSS for width.

3. Final Answer:

   width: 20px; -> Option C

4. Quick Check:

   10px * 2 = 20px [OK]

Hint: Multiply unit number by unitless number keeps unit [OK]

Common Mistakes:

• Concatenating number and unit as string
• Losing unit after multiplication
• Expecting unit to change or disappear

4. Identify the error in this Sass code:

$height: 50px + 10;
.box {
  height: $height;
}

medium

A. Adding a unitless number to a number with unit causes error

B. Variable name cannot start with $

C. Missing semicolon after variable declaration

D. Units must be written in uppercase

Solution

1. Step 1: Check operation between numbers with and without units

   Sass cannot add a unitless number to a number with units directly.

2. Step 2: Identify the error cause

   Adding 50px and 10 (unitless) causes a unit mismatch error.

3. Final Answer:

   Adding a unitless number to a number with unit causes error -> Option A

4. Quick Check:

   Unit mismatch in addition = error [OK]

Hint: Cannot add unitless number to number with unit directly [OK]

Common Mistakes:

• Assuming variable names can't start with $
• Forgetting semicolons (Sass allows optional semicolons)
• Thinking units are case sensitive

5. You want to create a responsive padding that is 2rem on small screens and 5% on large screens using Sass variables. Which approach correctly defines and uses these units?

hard

A. $small-padding: 2rem;
$large-padding: 5%;
.container {
padding: calc($small-padding + $large-padding);
}

B. $small-padding: 2;
$large-padding: 5;
.container {
padding: $small-padding rem;
@media (min-width: 768px) {
padding: $large-padding %;
}
}

C. $small-padding: 2rem;
$large-padding: 5%;
.container {
padding: $small-padding + $large-padding;
}

D. $small-padding: 2rem;
$large-padding: 5%;
.container {
padding: $small-padding;
@media (min-width: 768px) {
padding: $large-padding;
}
}

Solution

1. Step 1: Define variables with units included

   Variables must include units like 2rem and 5% directly.

2. Step 2: Use variables correctly in media queries

   Apply $small-padding normally and override with $large-padding inside media query.

3. Step 3: Avoid invalid syntax

   The other options misuse units or try invalid operations like adding different units.

4. Final Answer:

   Defines variables with units and uses media queries -> Option D

5. Quick Check:

   Variables with units + media query = responsive padding [OK]

Hint: Include units in variables; use media queries to switch values [OK]

Common Mistakes:

• Trying to add numbers with different units
• Writing units outside variables incorrectly
• Using calc() with Sass variables without interpolation