Sass List Functions

Sass Tutorial

Sass List Functions

Sass List Functions help you create, read, modify, and loop through lists.
Lists are extremely useful for spacing systems, breakpoints, colors, utility classes, and grids.

🔹 What Is a List in Sass?

A list is a collection of values separated by spaces or commas.

$margin-list: 10px 20px 30px;
$colors: red, green, blue;

✔ Both are valid lists.

🔹 Common Sass List Functions

1️⃣ length()

Returns the number of items in a list.

length(10px 20px 30px);

✔ Output:

3

2️⃣ nth()

Returns the item at a specific position (1-based index).

nth(10px 20px 30px, 2);

✔ Output:

20px

3️⃣ set-nth()

Replaces an item at a given position.

set-nth(10px 20px 30px, 2, 25px);

✔ Output:

10px 25px 30px

4️⃣ append()

Adds an item to a list.

append(10px 20px, 30px);

✔ Output:

10px 20px 30px

5️⃣ join()

Combines two lists.

join(10px 20px, 30px 40px);

✔ Output:

10px 20px 30px 40px

6️⃣ index()

Returns the position of a value.

index(red green blue, green);

✔ Output:

2

(Returns null if not found)

7️⃣ zip()

Combines multiple lists into pairs.

zip(10px 20px, red blue);

✔ Output:

(10px red), (20px blue)

8️⃣ is-bracketed()

Checks if a list uses square brackets.

is-bracketed([10px, 20px]);

✔ Output:

true

9️⃣ list-separator()

Returns the list separator.

list-separator(10px, 20px, 30px);

✔ Output:

comma

🔹 Looping Through a List (@each)

$colors: red green blue;

@each $color in $colors {
.text-#{$color} {
color: $color;
}
}

✔ Output:

.text-red { color: red; }
.text-green { color: green; }
.text-blue { color: blue; }

🔹 Real-Life Example (Spacing Utilities)

$spaces: 5px 10px 15px;

@each $space in $spaces {
.m-#{$space} {
margin: $space;
}
}

❗ Important Notes

✔ Sass lists are 1-based indexed
✔ Lists can be nested
✔ Space-separated lists are more common
✔ Use lists with loops for utility classes

📌 Summary

  • Lists store multiple values

  • Useful for grids, spacing, breakpoints

  • Powerful functions available

  • Works great with loops

You may also like...