Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Introspection

Sass content-exists() Function

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

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

πŸ‘¨β€πŸ’» 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