Complex data types — SASS: Programming

• List
• Associative arrays

In addition to the simple data types such as numbers, boolean values, and others learned in previous lessons, SASS provides two more data types:

• Lists
• Associative arrays (map)

These data types are complex because they have an internal structure that we can work with. These types can't help much on their own, but when combined with other tools, they create handy constructs that you can use.

List

Lists are the simplest of the complex structures. You have already encountered them but didn't know it. Almost any string in SASS is a list. Let's look at the example below:

$main-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

The value inside the $main-font variable is a list. And it's easy to make sure of that! There are special functions allowing to work with lists in the SASS preprocessor. One of those functions is nth(). With it, we can find out the value of a list by its index.

Important: We number lists from one in SASS. It is different from indexes and may cause some inconvenience to those who are familiar with other programming languages.

Let's create a class font-roboto that sets the Roboto font for the item. To do this, use the function nth() to take the second element of the list:

$main-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

.font-roboto {
  font-family: nth($main-font, 2);
}

The result of the compilation is the following CSS code:

.font-roboto {
  font-family: Roboto;
}

This way, we can set some values not in variables but in a list to use them later inside our SASS file:

$indents: 1.3em, 2.1em, 3.3em, 4em;

.mt-1 {
  margin-top: nth($indents, 1);
}

.mx-3 {
  margin-left: nth($indents, 3);
  margin-right: nth($indents, 3);
}

The result of the compilation is the following CSS code:

.mt-1 {
  margin-top: 1.3em;
}

.mx-3 {
  margin-left: 3.3em;
  margin-right: 3.3em;
}

As you can see, lists make it a little easier to structure information and avoid unnecessary variables where they are not needed.

In addition to selecting an item from a list, we can add new values to an existing list. We can do it with the join() function. The function accepts the list and adds the values:

$main-colors: #007bff, #6610f2;
$secondary-colors: #6f42c1, #dc3545;

$theme-colors: join($main-colors, $secondary-colors);

The variable $theme-colors now contains a list of all the colors available to us.

If, on the other hand, we want to add a single item to an existing list, there is the append() function for that.

The function takes the list and the item we want to add:

$main-colors: #007bff, #6610f2;
$main-colors: append($main-colors, #6f42c1);

.box-bg {
  background: nth($main-colors, 3);
}

Associative arrays

The most important data structure in SASS is associative arrays. Such arrays contain not just values, like lists, but `key: value' pairs. It helps to work with value arrays more clearly and make a selection not by their index but by the key.

The associative array is simple. Suppose we have a font that supports all available values of the font-weight property. We want to use numeric values instead of the standard normal and bold variations. On lists, this would look like this:

$font-weights: 200, 400, 500, 800;

/*

  200 for the light value
  400 for the normal value
  500 for the medium value
  800 for the bold value

*/

.warning {
  font-weight: nth($font-weights, 4);
}

.user-name {
  font-weight: nth($font-weights, 2);
}

Most likely, you keep coming to the list initialization to remember which index corresponds to the value you need now. Not very convenient. Let us turn our list into an associative array. To do this, take the list in parentheses and inside specify key-value pairs:

$font-weights: (light: 200, normal: 400, medium: 500, bold: 800);

The function map.get() helps to select a value by a key, whose arguments are an associative array and the key whose value is to be retrieved. For the function map.get() and others specified through the map. construct, we need to write the @use "sass:map" line. It will connect all the necessary functions to our project.

The result will be the following code:

@use "sass:map";

$font-weights: (light: 200, normal: 400, medium: 500, bold: 800);

.warning {
  font-weight: map.get($font-weights, bold);
}

.user-name {
  font-weight: map.get($font-weights, normal);
}

After compiling, you will get the following CSS code:

.warning {
  font-weight: 800;
}

.user-name {
  font-weight: 400;
}

The function map.merge() adds a new value to an associative array or merges two different arrays. Its operation is similar to the join() function in lists:

@use "sass:map";

$main-colors: (primary: #007bff, secondary: #6610f2);
$secondary-colors: (purple: #6f42c1, red: #dc3545);

$theme-colors: map.merge($main-colors, $secondary-colors);

As a result, the $theme-colors array will have the following values:

$theme-colors: (
  primary: #007bff,
  secondary: #6610f2,
  purple: #6f42c1,
  red: #dc3545
);

** Important: The program will select the last value if two associative arrays contain the same keys. Replace the key purple with primary. This key is also in the $main-color array. After using map.merge(), the $theme-colors array will look like this:

$theme-colors: (
  primary: #6f42c1,
  secondary: #6610f2,
  red: #dc3545
);