> For the complete documentation index, see [llms.txt](https://docs.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.angular-package.dev/sass/list/list.append.md).

# list.append()

The modified `list.append()` function returns a copy of [`$list`](#usdlist) with [`$val`](#usdval) added and/or with multiple [`$values`](#usdvalues...) added to the end.

{% hint style="info" %}
The function is modified by adding arbitrary values to the end of the parameters to preserve the original functionality.
{% endhint %}

{% code lineNumbers="true" %}

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

// The `list.append()` function.
@function append($list, $val, $separator: auto, $values...) {
  @each $value in list.join(($val,), $values, comma) {
    $list: list.append($list, $value, $separator);
  }
  @return $list;
}
```

{% endcode %}

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

### Parameters

#### **`$list`**&#x20;

The list to append the [`$val`](#usdval) and/or [`$values`](#usdvalues...) into.

#### **`$val`**&#x20;

The value to append to the end of [`$list`](#usdlist).

#### **`$separator`**&#x20;

The separator `comma`, `space` or `slash` of the list. Default, `auto`.

#### **`$values...`**&#x20;

Additional values to append into [`$list`](#usdlist).

### Return

Returns a copy of [`$list`](#usdlist) with [`$val`](#usdval) and/or [`$values`](#usdvalues...) added to the end.

## Examples

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

// Examples.
@debug list.append(10px 20px, 30px); // 10px 20px 30px
@debug list.append((red, green), blue, space); // red green blue

// additional values
@debug list.append((blue, red), green, auto, blue, red); // blue, red, green, blue, red
@debug list.append(10px 20px, 30px 40px, auto, 1px, 15px); // 10px 20px (30px 40px) 1px 15px
@debug list.append(10px, 20px, auto, 1em, 2rem); // 10px 20px 1em 2rem
@debug list.append(10px 20px, 30px 40px, auto, 1px, 15px, (1px 2px 3px)); // 10px 20px (30px 40px) 1px 15px (1px 2px 3px)
@debug list.append((10px, 20px), 30px 40px, auto, 1px, 15px, (1px 2px 3px), (4px, 5px)); // 10px, 20px, 30px 40px, 1px, 15px, 1px 2px 3px, (4px, 5px)
```