In addition to the simple data types such as numbers, boolean values, and others learned in previous lessons, SASS provides two more data types:
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.
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);
}
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
);
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.