list.join()

The list.join() returns a new list containing the elements of $list1 followed by the elements of $list2.

Function handles $delimiter functionality.

// 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);
}

https://github.com/angular-package/sass/blob/main/list/_list.join.function.scss

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

// Status: DONE
// The `list.join()` returns a new list containing the elements of `$list1` followed by the elements of `$list2`.
// Function handles `$delimiter` functionality.
// @param `$list1` The list to join elements of `$list2`.
// @param `$list2` The list to be joined into `$list1`.
// @param `$separator` Comma, space, or slash separator used between the elements of the list. Default, `auto`.
// @param `$bracketed` If `true` then returned list is between the square brackets.
// @param `$delimiter` 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` followed by the elements of `$list2`.
@function join(
  $list1,
  $list2,
  $separator: auto,
  $bracketed: auto,
  $delimiter: null
) {
  @if $delimiter {
    $result: list.join((), (), $separator, $bracketed);
    @each $value in list.join($list1, $list2, $separator) {
      $result: if(
        list.length($result) > 0,
        list.append($result, $delimiter, $separator),
        $result
      );
      $result: list.append($result, $value, $separator);
    }
    @return $result;
  }
  @return list.join($list1, $list2, $separator, $bracketed);
}

// Examples.
// modified join
// @debug join((a: a b c), d e f); // a (a b c), d, e, f
// @debug join(d e f, (a: a b c)); // d e f (a (a b c))
// @debug join((a: a b c), (a: a b c)); // a (a b c), a (a b c)

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

// @debug join((a: a b c), d e f, comma, true, '-'); // [a (a b c), "-", d, "-", e, "-", f]

Parameters

$list1

The list to join elements of $list2.

$list2

The list to be joined into $list1.

$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 followed by the elements of $list2.

Examples

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

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