Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass List

Sass join() Function

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

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

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