Welcome back
to series about SASS/SCSS. If you like this topic, this is link for you follow
other articles have the same content. Series about SASS/SCSS
In this
article, We continue to discuss Data types in SASS/SCSS.
Table of
contents:
- Maps
- Key in Maps
- Traverse elements in a map
- Add elements for Maps
- Merge Maps
Let’s go to
the content!
Maps
You know
Lists as an array in other programming languages. The way to get elements in
Lists is by “index”, you can just get an element in this index. Now, there is a
new problem that is you will not traverse the elements in turn from beginning
to end or get an element at a certain position. But we get the element by key,
and we will get the value from this key itself. So, we need a data type that
can store datas in key-value form. So, let's go to find out which data type can
store key - value?
Through the
above problem, we can see that to save an element in a key - value pair,
nothing is more suitable than Maps in SASS/SCSS. To be able to create Maps, we
need parentheses “()”. And inside parentheses "()" will have a
structure of "key - value", to connect between keys and values we
use ":" and join between these elements is ",". In a
nutshell, we have a Map that will be written like this: (<key>:
<value>, <key>: <value>).
To make it
easier for you to imagine Maps in SASS/SCSS, there are similar data types in
other programming languages like, Map in Java, Object in JavaScript, Map in
C/C++, Dictionaries in Python.
More
specifically, we will implement in code a Map as follows:
// index.scss
$map-clr: ("primary": #444, "secondary": #999);
We have a
variable named “$map-clr”, this variable has the value (“primary”: #444,
“secondary”: #999). Keys are “primary” and “secondary”, and Values are
“#444”, “#999”. One thing that when using Maps you need to keep in mind is that
the key in Maps is unique, and the value can be duplicated. To explain this, we
can understand as follows: we need to get the value assigned to a value, if the
keys are duplicate then we cannot know which key we need to get the value of.
When we have keys that are unique and we simply take those keys and look at the
value, so the value can be duplicated.
Key in Maps
As discussed
above, we see that the key needs to be unique, we know that we have data types
like Numbers, Strings, Colors, Boolean, Null so what is the data type that the
key can use?
// index.scss
$map-clr: (primary: #444, "secondary": #999,
null: null, true: true, hsl(24, 24%, 24%): #333);
@debug map-keys($map: $map-clr);
// => primary, "secondary", null,
true, #4c3a2f
We have a
map with keys that have many data types like unquoted string, “quoted string”,
null, boolean, colors. We use function map-keys(), this function returns a list
of keys in a map. As a result, all keys are accepted, which means that any data
type can become a key of Maps.
Next, to
make sure that it's not wrong to store keys according to these data types, we
will keep track of how getting values according to these keys will be?
// index.scss
$map-clr: (primary: #444, "secondary": #999,
null: null, true: true, hsl(24, 24%, 24%): #333);
@debug map-get($map: $map-clr, $key: primary); //
=> #444
@debug map-get($map: $map-clr, $key: "secondary"); // => #999
@debug map-get($map: $map-clr, $key: null); // => null
@debug map-get($map: $map-clr, $key: true); // => true
@debug map-get($map: $map-clr, $key: hsl(24, 24%, 24%)); // => #333
@debug map-get($map: $map-clr, $key: "accent"); // => null
We use map-get($map, $key) to get the values in a map
based on the key, the result we get is exactly what we initialized. In
addition, any keys that do not appear in the map are returned as null. In the
example above, we have the key "accent" completely absent from the
map, and the result we get is null. We can assert that keys in maps can use any
data types.
However,
to ensure synchronization and avoid errors later. Then we should use
"quoted string" to make keys for maps. Of course, it's okay to use
other data types for keys. Depends on what you want to use.
As the
original theory goes, keys are unique. So let's see in a map with two keys,
what's the story?
// index.scss
$map: ("primary": 2000, "secondary": 1000, "primary": 3000);
// => Error: Duplicate key.
@debug map-get($map: $map, $key: "primary");
@debug map-get($map: $map, $key: "secondary");
@debug map-get($map: $map, $key: "primary");
What we get
is an error, you will not be able to continue the program due to the
"Duplicate key" error. Thus, we know that we should not duplicate the
key in a map, and we cannot do this because of the SASS/SCSS engine.
Traverse elements in a map
As mentioned
in the previous section, we have “map-get()” to get the value from a key. And
we have another way that is to use @each, this part has been explained very
well in the article about @each, you can refer to it here. @each in SASS/SCSS
// index.scss
$map: ("primary": 2000, "secondary": 1000);
@each $key,
$value in $map {
@debug $key - $value;
// => "primary"-2000
// => "secondary"-1000
}
We can
explain it simply as follows: we use @each and initial two variables “$key” and
“$value” to represent key – value pairs to be retrieved “in $map”. And we can
simply use the key-value as we like.
Add elements for Maps
Now that you
know how, get elements, and browse elements, now another question arises
whether we can add one or more elements to Maps. We will use a function
map.set() to add elements to Maps.
// index.scss
@use "sass:map";
$map: ("primary": 2000, "secondary": 1000);
@debug $map;
// => ("primary": 2000,
"secondary": 1000)
@debug map.set($map, "accent", 4000);
// => ("primary": 2000,
"secondary": 1000, "accent": 4000)
To be able
to use the function “map.set()” we need to “@use ‘sass:map’”. So we know that
Maps can add elements. However, we have a case that when we add elements, we
have duplicate key, what will happen? Let's look at the example below:
// index.scss
@use "sass:map";
$map: ("primary": 2000, "secondary": 1000);
@debug $map;
// => ("primary": 2000,
"secondary": 1000)
@debug map.set($map, "primary", 4000);
// => ("primary": 4000,
"secondary": 1000)
Amazing! The
SASS engine not only does not report an error, but it also excutes and
overwrites the old value of a key. This you need to control very well,
otherwise the duplicate key can lead to data loss and failure of your entire
system.
Merge Maps
We've
learned we can add elements to Maps, so now what if we merge two maps together:
// index.scss
$map: ("primary": 2000, "secondary": 1000);
$map-2: ("accent": 3000, "soft": 4000);
@debug map-merge($map1: $map, $map2: $map-2);
// => ("primary": 2000,
"secondary": 1000, "accent": 3000, "soft": 4000)
We can use
the pre-written “map-merge()” function without having to import any additional
modules, and do the job of merging two maps together. Another question is, what
if both map duplicate key and we merge the two together.
// index.scss
$map: ("primary": 2000, "secondary": 1000);
$map-2: ("primary": 3000, "soft": 4000);
@debug map-merge($map1: $map, $map2: $map-2);
// => // ("primary": 3000,
"secondary": 1000, "soft": 4000)
We see that
as a result we have the value of the second map overwritted to the original
value. This requires you to have good control over the key - values because
Maps has an overwrite mechanism, not an addition. If you want to duplicate the
key then you add the values together then you need to set up more.
Conclusion
Through this
article, you have learned how to get elements in Maps, as well as browse the
elements in this map. Adding elements, merging maps has been explained in detail.
If you have
any ideas, feel free to comment below. Thank you for joining with me. Having a
good day!
0 Nhận xét