Sass join() Function

Last Updated:

Sass join() Function

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

Example

SASS TO CSS CONVERTER
.foo{ margin: join(10px 20px, 30px 40px); margin: join((blue, red), (#fff, #000)); margin: join(10px 20px, 30px 40px, $separator: comma); margin: join([10px], 20px); margin: join(10px, 20px, $bracketed: true); }

Syntax

join($list1, $list2, $separator, $bracketed)

Parameter Value

ValueTypeExplanation
$list1 Required Specifies the first list.
$list2 Required Specifies the second list.
$separator Optional Specifies the separator.
  • auto - If it’s auto, the returned list will use the same separator as $list1 if it has a separator, or else $list2 if it has a separator, or else space. Other values aren’t allowed. Default value.
  • comma - If $separator is comma, the returned list is comma-separted.
  • space - If it’s space, the returned list is space-separated.
$bracketed Optional Specifies whether or not to include bracket.
  • auto - If it’s auto, the returned list will be bracketed if $list1 is. Other values aren’t allowed. Default value.
  • true - If it's true, the returned list has square brackets.
  • false - If it’s false, the returned list has no brackets.

Return Value

ValueExplanation
list Returns a new list containing the elements of $list1 followed by the elements of $list2.

Share this Page

Meet the Author