Welcome back to series about SASS/SCSS. If you like this topic, this is a link for you follow other articles. Series about SASS/SCSS
In this
article, we will discuss the rest of the SASS/SCSS Data types.
Table of
contents:
- Booleans
- Nulls
- Functions
Let’s go to
the content
Booleans
Booleans are
Data types that can only have two values, true and false. However, in practice
Booleans is still applied in many places. We can say in the communication
between signals that the bits are 1 and 0. States such as light bulbs are off
or on, whether the above theory is true or false… If we look at Booleans from a
more realistic perspective, we see that Booleans are playing an equally
important role in Data types like Numbers, Strings, …
We already
know that Booleans can be applied in so many places, if in code, more
specifically in SASS/SCSS, how will we apply it? As we said above, Booleans
have two values true and false, so where we need to apply the condition, we
can apply Booleans. So where else than @if, @while or function if() in
SASS/SCSS.
// index.scss
$is-red: false;
.btn {
@if($is-red) {
background-color: red;
}
@else {
background-color: yellow;
}
}
Everyone
knows that for the code block of an @if to work, <expression> needs to be
Boolean true. We can easily see where we can apply Booleans, the result we get
will be:
/* index.css */
.btn {
background-color: yellow;
}
Pretty simple to figure out. Besides @if - @else, we also
have Ternary operator, this operator is quite common in many languages. If you
want to use this operator, you can use the following:
// index.scss
@debug if(true, 2, 3); // => 2
@debug if(false, 2, 3); // => 3
Function if() is the default function you just need to
call and use without importing any additional libraries. We can summarize that
where <expression> is needed to be a Booleans value, we can apply
Booleans to it.
We already know where we can use Booleans, so then how do
we know which values are truthy and which are falsy. For other programming
languages, you need to remember many values, but SASS/SCSS is much simpler, you
just need to remember “Booleans false” and “null” is falsy, the rest is all
truthy. So that means values like empty strings, empty lists, and number 0
are all truthy in SASS. To check the accuracy, let's observe the following
example:
// index.scss
@debug if(true, yes, no); // => yes
@debug if(false, yes, no); // => no
@debug if(null, yes, no); // => no
@debug if(0, yes, no); // => yes
@debug if('', yes, no); // => yes
@debug if((), yes, no); // => yes
We have a
Ternary operator, if the things we listed above are about which values are
falsy and which values are truthy. The results that we get are completely
consistent with the theory that we have set out. The simplest conclusion is
that Booleans is false, and null is that the other falsy are truthy.
Nulls
We discussed
Nulls data type above. And we know Nulls is falsy and only value of its type.
It is often return by functions indicating the lack of a result.
Null is
returned as lack of a result, so which values are the lack of a result.
// index.scss
@use 'sass:list';
@use 'sass:string';
$map: ('primary': primary, 'secondary': secondary);
$list: (1, 2, 3);
$string: 'Hello world';
@debug map-get($map: $map, $key: 'accent'); // => null
@debug list.index($list, 4); // => null
@debug string.index($string, 'friend'); // => null
@debug &; // => null
We have
places where null values can appear in Maps this key does not appear, in
Lists there is no such index, in Strings there is no such word. Besides, we
have "&", this is the sign that appears in the local scope
representing the components that are directly contained in that scope. However,
in case we call “&” in global, “&” does not represent any components so
the value it returns is null.
We can see
that Null represents lack of results; we can also understand that this is an
error. To avoid unwanted bugs, we need to remove at least Nulls in return
values. In case you can control everything, you can completely return null.
// index.scss
@debug if(null, "Yes", "No"); // => No
In the
example above we can see that we set <expression> to get the value
"null". In more practical cases you can set <expression> to
“null” and you will stop the program and do nothing.
Functions
Functions can be values too! You can't write a function that becomes a value, but you can take arguments and turn arguments into the values you want. Based on the returned values, we can say that Functions can be values too. I have an article about Functions you can refer to here. Function in SASS/SCSS
Conclusion
We have gone through all the Data
types in SASS/SCSS, we know how these Data types appear and where these Data
types can be used.
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