Functions with parameters in SASS - Deep Dive

Overview - Functions with parameters

What is it?

Functions with parameters in Sass are reusable blocks of code that take inputs called parameters. These parameters allow the function to work with different values each time it is used. This helps you write cleaner and more flexible stylesheets by avoiding repeated code. You call the function with specific values to get customized results.

Why it matters

Without functions with parameters, you would have to write the same style calculations or values over and over, making your code long and hard to maintain. Parameters let you create one function that can handle many cases, saving time and reducing mistakes. This makes your stylesheets easier to update and adapt as your design changes.

Where it fits

Before learning functions with parameters, you should understand basic Sass syntax and how to write simple functions without parameters. After this, you can learn about default parameter values, variable arguments, and how to use functions in complex calculations or mixins.

Mental Model

Core Idea

A function with parameters is like a recipe that takes ingredients (parameters) to make a dish (result) customized each time you cook it.

Think of it like...

Imagine a coffee machine where you choose how much coffee and milk to add each time. The machine is the function, and the amounts you select are the parameters that change the taste.

Function with parameters flow:

┌───────────────┐
│ Define function│
│ with parameters│
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Call function  │
│ with arguments │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Function uses  │
│ parameters to  │
│ calculate and  │
│ return result  │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What is a Sass function

Concept: Introduce the idea of a function in Sass as a reusable block that returns a value.

In Sass, a function is a named block of code that performs a task and returns a value. You define it using @function followed by the function name and curly braces. Inside, you write code that ends with @return to send back a value. For example: @function double($number) { @return $number * 2; } This function doubles any number you give it.

Result

You can call double(5) and get 10 as the result.

Understanding that functions return values lets you create reusable calculations instead of repeating code.

2

Foundation

Parameters in Sass functions

Concept: Explain how parameters let functions accept inputs to work with different values.

Parameters are placeholders inside a function that accept values when you call it. You list them inside parentheses after the function name. For example: @function add($a, $b) { @return $a + $b; } Here, $a and $b are parameters. When you call add(3, 4), $a becomes 3 and $b becomes 4.

Result

Calling add(3, 4) returns 7, but add(10, 5) returns 15.

Parameters make functions flexible by letting you reuse the same logic with different inputs.

3

Intermediate

Using parameters in calculations

🤔Before reading on: do you think you can use parameters in any math operation inside a function? Commit to yes or no.

Concept: Show how parameters can be used in math to create dynamic style values.

You can use parameters in any calculation inside a function. For example, a function to calculate spacing: @function spacing($multiplier) { @return $multiplier * 8px; } Calling spacing(2) returns 16px, spacing(3) returns 24px. This helps keep consistent spacing scales.

Result

spacing(2) outputs 16px, spacing(3) outputs 24px.

Knowing you can do math with parameters lets you build scalable and consistent design systems.

4

Intermediate

Default parameter values

🤔Before reading on: do you think parameters must always be provided when calling a function? Commit to yes or no.

Concept: Teach how to assign default values to parameters so they are optional.

You can give parameters default values by using a colon and value in the function definition: @function padding($size: 10px) { @return $size * 2; } If you call padding() without arguments, $size is 10px. If you call padding(5px), $size is 5px.

Result

padding() returns 20px, padding(5px) returns 10px.

Default values make functions easier to use by providing sensible fallbacks.

5

Intermediate

Named arguments in function calls

🤔Before reading on: do you think you can specify which parameter to set by name when calling a function? Commit to yes or no.

Concept: Explain how to call functions using named arguments to improve clarity and flexibility.

Instead of relying on order, you can specify parameters by name: @function box-shadow($x: 0, $y: 0, $blur: 5px) { @return $x $y $blur rgba(0,0,0,0.3); } Call with named arguments: box-shadow($blur: 10px, $x: 2px); This sets $blur to 10px and $x to 2px, $y uses default 0.

Result

Returns '2px 0 10px rgba(0,0,0,0.3)'.

Named arguments let you skip parameters and improve readability in complex functions.

6

Advanced

Variable arguments with ...

🤔Before reading on: do you think Sass functions can accept an unknown number of parameters? Commit to yes or no.

Concept: Introduce variable arguments (rest parameters) to accept many inputs in one parameter.

You can use ... after a parameter name to collect extra arguments: @function sum($numbers...) { $total: 0; @each $num in $numbers { $total: $total + $num; } @return $total; } Calling sum(1, 2, 3, 4) returns 10.

Result

sum(1, 2, 3, 4) outputs 10.

Variable arguments let you write flexible functions that handle many inputs without fixed parameters.

7

Expert

Parameter evaluation and scope surprises

🤔Before reading on: do you think parameters are evaluated once at call or each time used inside the function? Commit to your answer.

Concept: Explain how parameters are evaluated and how scope affects their values inside functions.

Parameters are evaluated when the function is called, but if you use variables inside default values, those variables are evaluated at call time, not definition time. Also, parameters are local to the function and do not affect variables outside. Example: $base: 5px; @function test($size: $base) { @return $size * 2; } Changing $base before calling test() changes the result. This can cause unexpected results if you rely on global variables inside defaults.

Result

If $base changes, test() output changes accordingly.

Understanding parameter evaluation timing prevents bugs when using variables as default values.

Under the Hood

When you call a Sass function with parameters, the Sass compiler creates a new local environment for that function call. It assigns the passed arguments to the parameters in this local scope. Then it runs the function code using these local values. After reaching @return, it sends the computed value back to where the function was called. This process repeats for each call, keeping parameters isolated from outside variables.

Why designed this way?

This design keeps functions predictable and reusable. By isolating parameters in local scope, functions avoid accidentally changing or depending on outside variables. Default parameters evaluated at call time allow flexibility to use current variable values. This approach balances safety and flexibility, avoiding side effects common in older stylesheet languages.

Function call flow:

Caller scope
   │
   ▼
┌───────────────┐
│ Function call │
│ with args     │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ New local     │
│ scope created │
│ Params set   │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Function body │
│ executes      │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ @return value │
└──────┬────────┘
       │
       ▼
Caller receives value

Myth Busters - 4 Common Misconceptions

Quick: do you think parameters can change variables outside the function? Commit to yes or no.

Common Belief: Parameters can modify global variables or variables outside the function.

Reality: Parameters and variables inside functions are local and cannot change outside variables.

Why it matters: Expecting parameters to change outside variables leads to bugs and confusion about where values come from.

Quick: do you think default parameter values are fixed when the function is defined? Commit to yes or no.

Common Belief: Default parameter values are set once when the function is defined and never change.

Reality: Default values are evaluated each time the function is called, using current variable values.

Why it matters: Misunderstanding this causes unexpected results when global variables change but defaults seem stuck.

Quick: do you think you must always provide all parameters when calling a function? Commit to yes or no.

Common Belief: All parameters must be provided every time you call a function.

Reality: Parameters with default values are optional and can be omitted.

Why it matters: Not knowing this leads to verbose calls and missed opportunities for simpler code.

Quick: do you think variable arguments (...) collect parameters into a list or separate variables? Commit to list or separate.

Common Belief: Variable arguments (...) create separate variables for each argument.

Reality: Variable arguments collect all extra arguments into a single list variable.

Why it matters: Misusing variable arguments can cause errors in loops or calculations expecting a list.

Expert Zone

1

Parameters with default values can depend on other parameters, but order matters because later defaults can use earlier parameters.

2

Using variable arguments (...) inside functions requires careful handling with @each loops to avoid type errors.

3

Functions in Sass are pure: they cannot produce side effects like changing styles directly, which keeps stylesheets predictable.

When NOT to use

Avoid using functions with many parameters when a mixin or map might better organize complex style variations. For very dynamic styles, consider CSS custom properties instead of complex Sass functions.

Production Patterns

In production, functions with parameters are used to create design tokens like spacing scales, color manipulations, and responsive calculations. They help maintain consistency and allow quick theme changes by adjusting input values.

Connections

Mathematical functions

Sass functions with parameters work like math functions taking inputs and returning outputs.

Understanding math functions helps grasp how Sass functions transform inputs into style values.

Programming function parameters

Sass function parameters follow similar rules as parameters in programming languages like JavaScript or Python.

Knowing programming parameters clarifies concepts like default values, named arguments, and variable arguments in Sass.

Cooking recipes

Both use ingredients (parameters) to produce different dishes (results) based on input amounts.

This cross-domain link shows how input customization creates variety from a single process.

Common Pitfalls

#1 Forgetting to provide required parameters causes errors.

Wrong approach:

@function multiply($a, $b) {
@return $a * $b;
}

// Call without parameters
$result: multiply();

Correct approach:

@function multiply($a, $b) {
@return $a * $b;
}

// Call with parameters
$result: multiply(3, 4);

Root cause:

Not understanding that parameters without defaults must be provided when calling.

#2 Using variables outside function scope inside function without passing as parameters.

Wrong approach:

$base: 10px;
@function calc-padding() {
@return $base * 2;
}

// $base inside function is undefined or unexpected

Correct approach:

$base: 10px;
@function calc-padding($size) {
@return $size * 2;
}

// Pass $base as argument
$result: calc-padding($base);

Root cause:

Misunderstanding function scope and parameter necessity.

#3 Misusing variable arguments by treating them as single values.

Wrong approach:

@function sum($nums...) {
@return $nums * 2;
}

// This tries to multiply a list by 2, causing error

Correct approach:

@function sum($nums...) {
$total: 0;
@each $num in $nums {
$total: $total + $num;
}
@return $total;
}

Root cause:

Not recognizing that variable arguments are a list and need iteration.

Key Takeaways

Functions with parameters let you write reusable, flexible style calculations in Sass.

Parameters accept inputs that customize the function's behavior each time you call it.

Default parameter values make some inputs optional, simplifying function calls.

Variable arguments allow functions to handle many inputs without fixed parameters.

Understanding parameter scope and evaluation timing prevents common bugs.