Sass content-exists() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 26 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The content-exists() function in Sass is a utility function that checks whether a content block has been passed to a mixin.

This function is particularly useful when creating mixins that may or may not require content. It allows developers to add conditional logic to handle scenarios where content is provided or omitted, ensuring more flexible and robust styles.

💡 Syntax

The syntax for content-exists() is simple and straightforward:

Syntax

Copied

content-exists()

The function does not take any parameters.
It returns a boolean value: true if content is passed, false otherwise.

🔢 Parameters

The content-exists() function does not require any parameters. It simply checks the current mixin to see if content has been provided.

↩️ Return Value

The content-exists() function returns a boolean:

true: if content is provided to the mixin.
false: if no content is provided.

📝 Example Usage

Let's explore some examples to understand how content-exists() can be used effectively in Sass.

📜 Example 1: Basic Usage in a Mixin

example.scss

Copied

@mixin button-style {
  background-color: #3498db;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: #fff;

  @if content-exists() {
    @content;
  } else {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

.btn {
  @include button-style;
}

.btn-with-content {
  @include button-style {
    font-weight: bold;
  }
}

In this example, the button-style mixin uses content-exists() to determine whether additional content is passed. If content is passed, it’s inserted using @content; otherwise, a default box-shadow is applied.

📜 Example 2: Optional Content in a Mixin

example.scss

Copied

@mixin card($padding: 20px) {
  padding: $padding;
  border: 1px solid #ddd;
  border-radius: 8px;

  @if content-exists() {
    @content;
  } else {
    background-color: #f9f9f9;
  }
}

.card-basic {
  @include card;
}

.card-custom {
  @include card {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

Here, the card mixin checks for the presence of content. If no content is provided, a default background color is applied. When content is passed, it can override the default styles.

📜 Example 3: Nested Mixins with content-exists()

example.scss

Copied

@mixin container {
  max-width: 1200px;
  margin: 0 auto;

  @if content-exists() {
    @content;
  } else {
    padding: 20px;
  }
}

@mixin responsive-container {
  @include container {
    @media (max-width: 768px) {
      padding: 10px;
    }
  }
}

.wrapper {
  @include responsive-container;
}

This example demonstrates how content-exists() can be used within nested mixins to manage different styles based on content presence.

🎉 Conclusion

The content-exists() function is a valuable tool in Sass that enhances the flexibility and reusability of mixins. By checking for the existence of content, you can create more versatile mixins that adapt to different use cases. This function simplifies the process of handling optional content, allowing for cleaner, more maintainable code.

Understanding and utilizing content-exists() will help you build more dynamic styles and better manage conditional logic in your Sass projects. It's an essential function for any Sass developer looking to create more sophisticated and responsive stylesheets.