Lists in SASS

This article explains lists in SASS.

We will cover the basics and advanced usages of SASS lists and provide practical examples.

YouTube Video

Lists in SASS

SASS offers useful programming-like features as an extension to CSS. Among these, lists are a very useful feature when defining styles dynamically.

What is a SASS List?

A SASS list is a collection of values separated by commas (,) or spaces. They are used when passing multiple values to CSS properties or performing iterations.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

Main features of lists include the following points:.

• A list can contain values of any data type, such as numbers, strings, or colors.
• You can choose between comma-separated and space-separated lists depending on the use case.

Basic Example of Style Definition Using Lists

Below is an example of dynamically generating simple border styles using lists.

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

Compilation Output

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}

• With the nth() function of the sass:list module, you can retrieve a specific value from a list.

List Manipulation

The sass:list module provides functions for manipulating lists, making it easy to retrieve and add elements..

Retrieve an Element: nth()

nth() is a function that retrieves an element from a list.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

• In this code, the nth() function is used to get the value at the specified index.

Check the Index: index()

index() is a function that returns the position of an element in a list.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

• In this code, index() is used to obtain that the element blue is the third item in the list.

Get List Length: length()

length() is a function that returns the length of a list.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

• In this code, the length() function is used to get the number of values in the list.

Add an Element: append()

append() is a function used to add elements to a list.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

• In this code, the append() function is used to add a value to the list.

Replace an Element: set-nth()

set-nth() is a function that replaces the element at a specified position with another value.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue

• In this code, set-nth() is used to replace the second element with yellow.

Combine Lists: join()

join() is a function that combines two lists.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

• In this code, join() is used to combine two lists into one.

Pair Lists: zip()

zip() is a function that groups several lists element-by-element.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)

• In this code, zip() is used to combine names and ages as pairs.

Nested Lists

Lists can also be nested, allowing them to be used like two-dimensional arrays.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red

• By handling such complex data structures, advanced style generation becomes possible.

Practical Example: Generating Gradients

Here is an example of efficiently generating gradients using lists.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

Compilation Output

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

• This code is an example of automatically generating gradients using lists in SCSS.

  • The colors used for the gradient are defined in the $colors list.
  • In the gradient() function, a position is calculated and assigned evenly to each color based on the number of colors, creating a list for the gradient.
  • In the .background class, linear-gradient is used to combine the generated color list and apply a horizontal gradient.

• Since the positions are automatically calculated according to the length of the color list, you can easily create an even gradient by adding or changing colors.

Cautions and Best Practices

The following points can be considered when using lists:.

• List Separator Type Comma-separated and space-separated lists are treated differently, so you need to choose appropriately according to the situation.

• List Size When manipulating lists dynamically, it is safe to check the size using the length() function.

• Managing Nested Lists When handling nested lists, careful index operations can help avoid errors.

Conclusion

SASS lists are a powerful tool for dynamically defining styles and efficiently managing complex designs.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video