Sass zip() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The zip() function in Sass is a powerful utility that allows you to combine multiple lists into a single list of lists.

This function is particularly useful when you need to pair corresponding elements from multiple lists and iterate over them together in a structured manner.

💡 Syntax

The syntax of the zip() function is straightforward. It takes multiple lists as arguments and returns a new list where each item is a list containing corresponding items from each input list.

Syntax

Copied

zip(list1, list2, ...)

🔢 Parameters

list1, list2, ...: Two or more lists that you want to combine into a single list of lists. Each input list should have the same number of elements.

↩️ Return Value

The function returns a new list where each element is a list that contains corresponding elements from each of the input lists. If the lists have different lengths, the result will have as many elements as the shortest list.

📝 Example Usage

Let’s explore some examples to understand how the zip() function works in different scenarios.

📜 Example 1: Basic Usage

example.scss

Copied

$list1: 1px solid red, 2px dotted blue;
$list2: margin, padding;

$zipped-list: zip($list1, $list2);

// Result: ((1px solid red, margin), (2px dotted blue, padding))

In this example, two lists are zipped together. The result is a new list where each element is a pair of corresponding elements from the input lists.

📜 Example 2: Iterating Over a Zipped List

example.scss

Copied

$list1: 10px, 20px, 30px;
$list2: #ff0000, #00ff00, #0000ff;

@each $size, $color in zip($list1, $list2) {
  .box-#{$size} {
    width: $size;
    background-color: $color;
  }
}

This example demonstrates how to iterate over a zipped list. Each iteration creates a new class with a width and background color based on the corresponding elements from the original lists.

📜 Example 3: Zipping Multiple Lists

example.scss

Copied

$list1: 1, 2, 3;
$list2: a, b, c;
$list3: x, y, z;

$zipped-list: zip($list1, $list2, $list3);

// Result: ((1, a, x), (2, b, y), (3, c, z))

Here, three lists are zipped together, producing a list where each element is a list containing corresponding elements from all three lists.

📝 Practical Application

The zip() function is especially useful when working with complex styles that require coordinated values from different lists. For example, if you're styling a set of elements that need consistent padding, borders, and colors, zip() can streamline the process.

📜 Example 4: Applying Multiple Styles

example.scss

Copied

$padding-list: 5px, 10px, 15px;
$border-list: 1px solid black, 2px dashed gray, 3px dotted red;
$color-list: #333, #666, #999;

@each $padding, $border, $color in zip($padding-list, $border-list, $color-list) {
  .box-#{$padding} {
    padding: $padding;
    border: $border;
    background-color: $color;
  }
}

In this example, each box class is assigned a unique combination of padding, border, and background color based on the values in the three lists.

🎉 Conclusion

The zip() function in Sass is an invaluable tool when working with multiple lists that need to be paired or iterated over together. By understanding and utilizing zip(), you can write more organized and efficient Sass code, especially in scenarios involving complex styling patterns.

Whether you’re building a consistent design system or simply need to streamline your Sass code, zip() offers a clean and elegant solution for handling multiple lists simultaneously.