Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass List

Sass zip() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
πŸ‘οΈ 10 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass zip() Function

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
Copy To Clipboard
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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy