# list.join()

The `list.join()` returns a new list containing the elements of [`$list1`](#usdlist1) followed by the elements of [`$list2`](#usdlist2).

{% hint style="info" %}
Function handles [`$delimiter`](#usddelimiter-null) functionality.
{% endhint %}

{% code lineNumbers="true" %}

```scss
// Sass.
@use 'sass:list';

// The `list.join()` function.
@function join(
  $list1,
  $list2,
  $separator: auto,
  $bracketed: auto,
  $delimiter: null
) {
  @if $delimiter {
    $list: ();
    $i: 1;
    @each $value in list.join($list1, $list2, $separator, $bracketed) {
      $list: list.append($list, $value, $separator);
      @if not(calc(list.length($list1) + list.length($list2)) == $i) {
        $list: list.append($list, $delimiter, $separator);
      }

      $i: $i + 1;
    }
    @return $list;
  }
  @return list.join($list1, $list2, $separator, $bracketed);
}
```

{% endcode %}

{% embed url="<https://github.com/angular-package/sass/blob/main/list/_list.join.function.scss>" %}

### Parameters

#### **`$list1`**&#x20;

The list to join elements of [`$list2`](#usdlist2).&#x20;

#### `$list2`

The list to be joined into [`$list1`](#usdlist1).

#### `$separator: auto`

Comma, space, or slash separator used between the elements of the list. Default, `auto`.

#### `$bracketed: auto`

If `true` then returned list is between the square brackets.

#### `$delimiter: null`

The delimiter is the character added as an element between each element in the returned list.

### Return

The return value is a new list containing the elements of [`$list1`](#usdlist1) followed by the elements of [`$list2`](#usdlist2).

## Examples

```scss
// Use.
@use 'angular-package/sass/list';

// Examples.
@debug list.join(a b c, d e f, $delimiter: '-'); // a "-" b "-" c "-" d "-" e "-" f

```