string.join()

The string.join() function returns the string built from $elements separated by $delimiter in original elements order.

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

// The `string.join()` function.
@function join($delimiter, $elements...) {
  $string: '';
  @each $element in $elements {
    @if list.index(color list number string, type-of($element)) {
      @each $element in $element {
        $string: string.insert($string, #{$element}#{$delimiter or ''}, -1);
      }
    }
  }
  @return string.slice($string, 1, calc((string.length($delimiter) + 1) * -1));
}

https://github.com/angular-package/sass/blob/main/string/_string.join.function.scss

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

// Status: DONE
// The `string.join()` function returns the `string` built from `$elements` separated by `$delimiter` in original elements order.
// @param `$delimiter` The delimiter to add between `$elements`.
// @param `$elements...` Elements to join to returned string of `color`, `list`, `number` or `string` type with the `$delimiter`.
// @return The return value is a `string` built from `$elements` with `$delimiter`.
@function join($delimiter, $elements...) {
  $string: '';
  @each $element in $elements {
    @if list.index(color list number string, type-of($element)) {
      @each $element in $element {
        $string: string.insert($string, #{$element}#{$delimiter or ''}, -1);
      }
    }
  }
  @return string.slice($string, 1, calc((string.length($delimiter) + 1) * -1));
}

// Examples.
// @debug join('-');
// @debug join('-', 'a', 'b', 'c'); // a-b-c
// @debug join('-', '', 'a', 'b', 'c'); // -a-b-c
// @debug join('-', 'a', 'b', 'c', ''); // a-b-c-
// @debug join('-', '', 'a', 'b', 'c', ''); // a-b-c-
// @debug join('-', 'a', ('b', 'c')); // a-b-c
// @debug join('-', a, b, c); // a-b-c

// Join number.
// @debug join('-', a, 1, b, 2, c, 3); // a-1-b-2-c-3

// Join color.
// @debug join('-', silver, orange, green, red, blue, yellow); // silver-orange-green-red-blue-yellow

Parameters

$delimiter

The delimiter to add between $elements.

$elements...

Elements to join to returned string of color, list, number or string type with the $delimiter.

Return

The return value is a string built from $elements with $delimiter.

Examples

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

// Examples.
@debug string.join('-');
@debug string.join('-', 'a', 'b', 'c'); // a-b-c
@debug string.join('-', '', 'a', 'b', 'c'); // -a-b-c
@debug string.join('-', 'a', 'b', 'c', ''); // a-b-c-
@debug string.join('-', '', 'a', 'b', 'c', ''); // a-b-c-
@debug string.join('-', 'a', ('b', 'c')); // a-b-c
@debug string.join('-', a, b, c); // a-b-c

// Join number.
@debug string.join('-', a, 1, b, 2, c, 3); // a-1-b-2-c-3

// Join color.
@debug string.join('-', silver, orange, green, red, blue, yellow); // silver-orange-green-red-blue-yellow