Tutorials

Sass function-exists() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 29 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The function-exists() function in Sass is a handy utility for checking whether a custom function is defined in your Sass code.

This feature is particularly useful when writing modular or reusable code where you may need to verify the availability of functions before attempting to call them. It helps to avoid runtime errors and ensures that your stylesheets are more robust and error-resistant.

💡 Syntax

The syntax of the function-exists() function is simple. It takes a single argument:

Syntax

Copied

function-exists(function-name)

🔢 Parameters

function-name: A string specifying the function you are checking for existence. This should be the name of the function exactly as it was defined.

↩️ Return Value

The function returns a boolean value:

true: If the function with the specified name exists.
false: If the function with the specified name does not exist.

📝 Example Usage

Here are some examples demonstrating how to use function-exists() in different scenarios.

📜 Example 1: Basic Usage

example.scss

Copied

@function my-custom-function($value) {
  @return $value * 2;
}

$has-function: function-exists('my-custom-function');

body {
  content: if($has-function, "Function exists", "Function does not exist");
}

In this example, we define a custom function my-custom-function and use function-exists() to check if it is available. The result is used to set the content property conditionally.

📜 Example 2: Conditional Function Call

example.scss

Copied

$has-mixins: function-exists('some-mixin');

@if $has-mixins {
  @include some-mixin;
} @else {
  // Fallback styles or alternative logic
  .fallback-style {
    background-color: gray;
  }
}

Here, function-exists() checks if a mixin named some-mixin exists before including it. This prevents errors in case the mixin is not defined.

📜 Example 3: Dynamic Function Check

example.scss

Copied

$dynamic-function-name: 'dynamic-function';

$function-available: function-exists($dynamic-function-name);

@if $function-available {
  @include $dynamic-function-name;
} @else {
  // Handle the absence of the function
  .default-style {
    color: black;
  }
}

In this example, the function name is stored in a variable, and function-exists() is used to dynamically check its presence. This approach allows for more flexible and dynamic code.

🎉 Conclusion

The function-exists() function in Sass is a valuable tool for ensuring that your code runs smoothly and without errors related to undefined functions. By allowing you to check for the existence of functions before calling them, it enhances the reliability and maintainability of your stylesheets.

Incorporating function-exists() into your Sass workflow can help you build more resilient and adaptable code, especially in larger projects or when working with reusable components. Utilize this function to safeguard against potential issues and to create more robust and dynamic stylesheets.

Experiment with function-exists() to understand its behavior and how it can fit into your coding practices. It’s a small addition that can make a significant difference in the stability and flexibility of your Sass projects.