Sass join() Function

❮ Prev Next ❯
You are Here:

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

Syntax

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

Parameter Value

ValueTypeExplanation
$list1RequiredSpecifies the first list.
$list2RequiredSpecifies the second list.
$separatorOptionalSpecifies 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.
$bracketedOptionalSpecifies 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
listReturns a new list containing the elements of $list1 followed by the elements of $list2.

Reminder

Hi Developers, we almost covered 99.1% of Sass Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in Sass.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

❮ PrevNext ❯

Share this Page

Meet the Author