Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Introspection

Sass call() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
πŸ‘οΈ 9 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass call() Function

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
Copy To Clipboard
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
Copy To Clipboard
@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
Copy To Clipboard
@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
Copy To Clipboard
$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
Copy To Clipboard
@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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy