Introduction to Sass List Functions

Sass List Functions

Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is used to generate CSS.

It provides several list functions to manipulate lists, including:

• length($list) - Returns the length of a list.

$colors: red green blue;
$color-count: length($colors); // Output: 3

• nth($list, $n) - Returns the nth element of a list.

$colors: red green blue;
$second-color: nth($colors, 2); // Output: green

// Set the value of the second item in the list to yellow
$colors: nth($colors, 2, yellow); // Output: red yellow blue

• join($list1, $list2, $separator) - Joins two lists together with an optional separator.

$font-sizes: 12px 14px 16px;
$line-heights: 1.2 1.4 1.6;

$font-stack: join($font-sizes, $line-heights, /); // Output: 12px/1.2 14px/1.4 16px/1.6

• append($list1, $val, $separator) - Appends a value to the end of a list with an optional separator.

$colors: red green blue;
$colors: append($colors, yellow); // Output: red green blue yellow

• zip($lists...) - Combines multiple lists into a single list of lists.

$font-sizes: 12px 14px 16px;
$line-heights: 1.2 1.4 1.6;
$font-colors: #333 #666 #999;

$font-stack: zip($font-sizes, $line-heights, $font-colors);
// Output: (12px 1.2 #333) (14px 1.4 #666) (16px 1.6 #999)

• index($list, $value) - Returns the index of a value within a list.

$colors: red green blue;
$green-index: index($colors, green); // Output: 2
$purple-index: index($colors, purple); // Output: null

• slice($list, $start-at, $end-at) - Returns a slice of a list from the start-at index to the end-at index.

$colors: red green blue yellow orange;

// Get the first three colors
$first-three-colors: slice($colors, 1, 3);
// Output: red green blue

// Get the last two colors
$last-two-colors: slice($colors, -2);
// Output: yellow orange

• sort($list, $order) - Sorts a list in ascending or descending order.

$numbers: 5 3 9 1 7;

// Sort the numbers in ascending order
$sorted-ascending: sort($numbers);
// Output: 1 3 5 7 9

// Sort the numbers in descending order
$sorted-descending: sort($numbers, descending);
// Output: 9 7 5 3 1

• uniq($list) - Returns a list with all duplicate values removed.

$list-with-duplicates: 1 2 3 4 3 2 1;

$unique-list: uniq($list-with-duplicates);

// Output: 1 2 3 4

• set-nth($list, $n, $value) - Sets the nth element of a list to a new value.

$original-list: red green blue;

$new-list: set-nth($original-list, 2, yellow);

// Output: red yellow blue

• map($list, $function) - Applies a function to each element in a list and returns a new list with the results.

$numbers: 1 2 3 4 5;

// Define a function that adds 1 to a number
@function add-one($number) {
  @return $number + 1;
}

$new-numbers: map($numbers, add-one);

// Output: 2 3 4 5 6

These list functions can be very useful when working with complex stylesheets that require dynamic functionality.

Example

Here are some examples of Sass lists and how to use them with Sass list functions:

// Define a list of colors
$colors: red, green, blue, yellow;

// Get the second item in the list
$second_color: nth($colors, 2);

// Join two lists together
$more_colors: orange, purple, pink;
$all_colors: join($colors, $more_colors);

// Append a value to the end of a list
$colors: append($colors, gray);

// Print out the list of colors
@each $color in $colors {
  .box-#{$color} {
    background-color: $color;
    width: 100px;
    height: 100px;
  }
}

In this example:

• We defined a list of colors and used the nth, join, and append functions to manipulate the list.
• We also used the @each directive to loop through the list and generate CSS classes for each color.