Sass call() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The call() function in Sass is a lesser-known but powerful feature that allows you to dynamically invoke functions.

This is particularly useful when working with higher-order functions, where you want to pass a function as an argument or choose which function to call based on a condition. With call(), you can make your Sass code more flexible and reusable.

💡 Syntax

The syntax of the call() function is simple. It takes a function name as its first argument, followed by any arguments you want to pass to that function.

Syntax

Copied

call(function-name, arguments...)

🔢 Parameters

function-name: A string or identifier representing the name of the function to be called.
arguments: A list of arguments that the function will accept.

↩️ Return Value

The call() function returns the result of the function it invokes. The return type will depend on the function being called.

📝 Example Usage

Let’s explore how the call() function can be used in various scenarios.

📜 Example 1: Basic Usage

example.scss

Copied

@function add-two($number) {
  @return $number + 2;
}

$result: call(add-two, 5); // Result: 7

body {
  margin-top: $result * 1px;
}

In this example, the add-two() function is defined to add 2 to a given number. Using call(), we invoke add-two with 5 as an argument, resulting in 7.

📜 Example 2: Dynamic Function Calls

example.scss

Copied

@function multiply-by-two($number) {
  @return $number * 2;
}

@function divide-by-two($number) {
  @return $number / 2;
}

$operation: 'multiply-by-two';
$result: call($operation, 10); // Result: 20

h1 {
  font-size: $result * 1px;
}

Here, the operation is dynamically chosen based on the value of the $operation variable. This allows for flexible function calls depending on the context.

📜 Example 3: Using call() with Built-in Functions

example.scss

Copied

$color: #336699;
$result: call('lighten', $color, 20%); // Result: a lighter shade of the color

nav {
  background-color: $result;
}

In this example, we use call() to invoke the built-in lighten() function, passing the color and the percentage as arguments. This lightens the color dynamically.

📜 Example 4: Passing Functions as Arguments

example.scss

Copied

@function operate($fn, $value) {
  @return call($fn, $value);
}

$result: operate('sqrt', 16); // Result: 4

footer {
  height: $result * 1rem;
}

This example shows how you can pass a function name as an argument to another function, making call() an essential part of writing higher-order functions in Sass.

🎉 Conclusion

The call() function in Sass opens up new possibilities for dynamic and reusable code. By allowing you to invoke functions programmatically, it brings a level of flexibility that can significantly enhance your workflow, especially when dealing with complex stylesheets. Whether you're working with custom functions or built-in ones, call() empowers you to write more modular and maintainable Sass code.

Understanding and using call() effectively can lead to cleaner, more efficient stylesheets, making your design process smoother and more adaptable to changing requirements.