Why custom functions are useful in SASS - Browser Rendering Impact

Render Flow - Why custom functions are useful

Write SASS code with custom function

↓

SASS compiler reads function definition

↓

Function logic executes during compilation

↓

Function returns computed value

↓

SASS compiler replaces function call with value

↓

CSS output generated with computed values

↓

Browser renders CSS styles

The SASS compiler reads your custom function, runs its logic during compilation, replaces the function call with the returned value, then outputs CSS that the browser renders visually.

Render Steps - 4 Steps

Code Added:<div class="box">Hello</div>

Before

[Empty page]

→

After

[box]
[Hello]

Adding the HTML element creates a visible box with text on the page.

🔧 Browser Action:Creates DOM node for div with class 'box'

Code Sample

A green box sized by a custom SASS function doubling 10px to 20px width and height, centered text inside.

SASS

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

SASS

$double-size: 2 * 10px;
@function double($value) {
  @return $value * 2;
}
.box {
  width: double(10px);
  height: double(10px);
  background-color: #8bc34a;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

Render Quiz - 3 Questions

After applying step 3, what is the size of the box?

A 20px by 20px

B 10px by 10px

C 40px by 40px

D Undefined size

Common Confusions - 2 Topics

Why doesn't the box size change if I write width: double(10px) in plain CSS?

Custom functions like double() only work in SASS during compilation. Plain CSS does not understand them, so the value is ignored or invalid.

💡 Use custom functions only in SASS, not in CSS directly.

Why is the box text not centered before adding flex properties?

Without flexbox, the text aligns to the top-left by default. Adding display:flex with centering properties moves the text to the center.

💡 Use flexbox to center content easily.

Property Reference

Property	Value Applied	Visual Effect	Common Use
width	double(10px) → 20px	Sets box width to 20px	Sizing elements dynamically
height	double(10px) → 20px	Sets box height to 20px	Sizing elements dynamically
background-color	#8bc34a	Green background color	Visual styling
display	flex	Enables flexbox layout	Aligning content
align-items	center	Vertically centers content	Centering text vertically
justify-content	center	Horizontally centers content	Centering text horizontally

Concept Snapshot

Custom functions in SASS let you reuse logic to calculate values. They run during compilation, outputting plain CSS values. Example: double(10px) returns 20px. This helps keep code DRY and consistent. Browsers only see the final CSS, not the functions.