Complex data types — SASS: Programming

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

• List;
• Associative arrays (map).

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

List

Lists are the "simplest" of the complex structures. In fact, 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 nothing but a list. And it's easy to make sure of that! There are special functions in the SASS preprocessor which allow us to work with lists. One of those functions is nth(). With it we can find out the value of a list by its index.

** Important:** lists in SASS are numbered from one. This is different from usual indexes and may cause some inconvenience to those who are familiar with other programming languages

Let's try to create a class font-roboto that sets the Roboto font for the item we want. 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. This is done with the join() function. The function accepts the list and the values to be added.

$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 are associative arrays. Such arrays contain not just values, like lists, but `key: value' pairs. This helps to work with arrays of values more clearly and make a selection not by their index, but by the key.

The associative array is written very simply. 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 variations of normal and bold. On lists, this would look like this:

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

/*

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

*/

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

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

Most likely, you will have to keep coming back to the initialization of the list to remember which index corresponds to the value you need right now. Not very convenient. Let's 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() is used 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 that are specified through the map. construct, we need to specify the line @use "sass:map". This 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() is used to add a new value to an associative array or merge 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: If two associative arrays contain the same keys, the value that was last** will be selected. Replace the key purple with primary. This key is also contained 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
);

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“