Sass join() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The join() function in Sass is a powerful utility for combining two lists into one. Lists are one of the essential data types in Sass, often used to store multiple values, such as colors, fonts, or dimensions.

The join() function allows you to merge two lists into a single list, either by appending or interleaving the items.

This function is particularly useful when you need to manage or manipulate collections of values in your Sass code.

💡 Syntax

The join() function has the following syntax:

Syntax

Copied

join(list1, list2, separator: auto)

🔢 Parameters

list1: The first list.
list2: The second list.
separator (optional): Defines the separator for the joined list. The options are:
- space: Joins the lists with spaces.
- comma: Joins the lists with commas.
- auto: Automatically uses the separator of list1.

↩️ Return Value

The function returns a new list that combines list1 and list2 with the specified separator.

📝 Example Usage

Let's explore some examples to understand how the join() function can be used effectively in Sass.

📜 Example 1: Basic Usage with Space Separator

example.scss

Copied

$list1: 1px solid red;
$list2: 2px dotted blue;

$combined-list: join($list1, $list2, space);

border: $combined-list; 
// Result: 1px solid red 2px dotted blue

In this example, two lists are joined using a space separator, resulting in a combined border style.

📜 Example 2: Joining with a Comma Separator

example.scss

Copied

$list1: (Helvetica, Arial);
$list2: (sans-serif);

$font-stack: join($list1, $list2, comma);

body {
  font-family: $font-stack; 
  // Result: Helvetica, Arial, sans-serif
}

Here, the join() function is used to combine two font stacks into one, with the lists separated by commas.

📜 Example 3: Auto Separator

example.scss

Copied

$list1: 10px 20px;
$list2: 30px;

$combined-list: join($list1, $list2, auto);

margin: $combined-list; 
// Result: 10px 20px 30px

In this example, the auto separator is used, so the lists are joined with the same separator as list1 (spaces).

📜 Example 4: Joining with Nested Lists

example.scss

Copied

$list1: (1px 2px, 3px 4px);
$list2: (5px 6px);

$combined-list: join($list1, $list2, comma);

.container {
  padding: $combined-list; 
  // Result: (1px 2px, 3px 4px), (5px 6px)
}

This example shows how join() can handle nested lists, which are common in more complex layouts.

🎉 Conclusion

The join() function in Sass is a versatile and essential tool for working with lists. It allows you to combine multiple lists into one, either by appending or interleaving the items, and gives you control over the separator. This function is invaluable when managing collections of related values, such as CSS properties, colors, or fonts, in a more dynamic and modular way.

By mastering the join() function, you can write more efficient and maintainable Sass code, especially when dealing with complex stylesheets. Experiment with different lists and separators to see how join() can simplify your Sass workflows.