Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass List

Sass is-bracketed() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
👁ī¸ 9 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass is-bracketed() Function

Photo Credit to CodeToFun

🙋 Introduction

The is-bracketed() function is a relatively new addition to Sass, designed to enhance control flow in stylesheets. It allows developers to determine whether a list is bracketed (i.e., enclosed within square brackets).

This function is particularly useful when working with complex lists or when you need to apply different styles or logic based on whether a list is bracketed.

💡 Syntax

The is-bracketed() function checks if a list is surrounded by square brackets. Its syntax is simple and intuitive:

Syntax
Copied
Copy To Clipboard
is-bracketed(list)

đŸ”ĸ Parameters

  • list: The list you want to inspect. It can be any Sass list, whether it's a single item, multiple items, or an empty list.

↩ī¸ Return Value

The function returns a boolean value:

  • true: If the list is bracketed (e.g., [item1, item2]).
  • false: If the list is not bracketed (e.g., item1, item2).

📝 Example Usage

Let's explore some examples to see how the is-bracketed() function works in practice.

📜 Example 1: Checking a Bracketed List

example.scss
Copied
Copy To Clipboard
$list: [1, 2, 3];
$is_bracketed: is-bracketed($list); // true

body {
  background-color: if($is_bracketed, #00ff00, #ff0000); // Green if true, red if false
}

In this example, the list $list is bracketed, so the is-bracketed() function returns true, and the background color will be green.

📜 Example 2: Checking a Non-Bracketed List

example.scss
Copied
Copy To Clipboard
$list: 1, 2, 3;
$is_bracketed: is-bracketed($list); // false

h1 {
  color: if($is_bracketed, #0000ff, #ff00ff); // Blue if true, magenta if false
}

Here, the list is not bracketed, so is-bracketed() returns false, and the text color will be magenta.

📜 Example 3: Using with Conditional Styles

example.scss
Copied
Copy To Clipboard
@mixin check-bracket($list) {
  @if is-bracketed($list) {
    border: 2px solid #000;
  } @else {
    border: 2px dashed #000;
  }
}

.element {
  @include check-bracket([10px, 20px]); // Bracketed list, solid border
}

.other-element {
  @include check-bracket(10px, 20px); // Non-bracketed list, dashed border
}

This example demonstrates how is-bracketed() can be used in mixins to apply different styles based on whether a list is bracketed.

🎉 Conclusion

The is-bracketed() function in Sass provides a valuable way to check whether a list is enclosed within square brackets. This function can be particularly useful in complex Sass logic, where different actions or styles are required based on the structure of lists. By incorporating is-bracketed() into your workflow, you can create more dynamic and responsive stylesheets, making your code more efficient and easier to maintain.

Whether you're managing advanced layouts or simply need to ensure consistency in your styles, is-bracketed() offers a straightforward solution to control flow based on list brackets.

👨‍đŸ’ģ 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