Tutorials

Sass is-bracketed() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

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

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

$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

$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

@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.