Welcome to series about SASS/SCSS. If you love this content this is a link for you to know more about this topic.
In this
article, we will discuss about If – Else in SASS.
Table of
contents:
- What is if – else?
- How to use @if – @else?
- Use @if not, @else if
- Expression in @if
- Can we don’t use @else?
Let’s go to
the contents!
What is
if – else?
In fact,
when you plan something, how do you do it? Is it that in this condition you
will do those things, or you will do other things in some conditions else? In
programming too, when you need to think logically for a problem, you need to
put a condition in this condition what you need to do. The if – else concept is
an extremely common concept in most programming languages. In SASS/SCSS as
well, you also need to know about if – else to make the requests that the task
makes.
In SASS/SCSS
to define an if – else you would use the @if - @else syntax. Besides @if needs
to require one or more expressions to be able to rely on and handle jobs
according to each condition.
How to
use @if – @else?
To use if –
else in SASS/SCSS you can use it anywhere you want to be it in a function,
mixin or in a block of one or more components.
// index.scss
@mixin is-red() {
@if (true) {
background-color: red;
}
}
@function is-yellow() {
@if (false) {
@return yellow;
}
}
.btn {
@if(2 > 0) {
background-color: red;
}
}
In the if
expression you can use parentheses "()" or not. However, to be able
to navigate to clean code, you should use parentheses "()".
For else is
the last case if other conditions do not occur else, else will be executed.
That means that your program will always work in any condition.
Use @if
not, @else if
You already
know the most basic if - else uses. So, let's go through some other conditions
where we need to use @if not, @else if.
For @if,
when the code block is to be executed, the expression in @if must be true.
Otherwise, we have @if not, the expression inside @if not will have to be false
for the code block to be executed.
// index.scss
@mixin is-red() {
$num: 3;
@if not ($num == 3) {
background-color: red;
}
@else {
background-color: yellow;
}
}
.btn {
@include is-red();
}
The result
we get will be:
.btn {
background-color: yellow;
}
If you are
new to this type of comparison, here is an explanation for the code above. We
have “$num: 3”, and we compare “$num == 3” the result of this expression is
true. However, we use @if not we will get the opposite result true will be
false. So we will execute the code block inside @else. To execute the above
code block, the expression will be “$num != 3”, combined with @if not will
result in true..
Another
case, if you have more than one expression, how do you do it? This is where
@else if does the job.
// index.scss
@mixin bg-color() {
$num: 3;
@if ($num > 3) {
background-color: red;
}
@else if ($num < 3) {
background-color: yellow;
}
@else {
background-color: green;
}
}
The result
for the above code will be:
/* index.css */
.btn {
background-color: green;
}
One caveat
for you is the use of @else if and merely the use of @if. As for using @else if
only if the inner expression is true then the code block will be executed, and
at the same time this conditional block will stop and not be executed further. In
case you use multiple @if, the code block is still executed, not terminated
when a code block has executed. Let's see specific examples.
// index.scss
@mixin bg-color() {
$num: 3;
$str: 'str';
$clr: #123;
@if ($num == 3) {
background-color: red;
}
@if ($str) {
background-color: yellow;
}
@if ($clr) {
background-color: green;
}
}
.btn {
@include bg-color();
}
We use just
@if and the result we get will be:
/* index.css */
.btn {
background-color: red;
background-color: yellow;
background-color: green;
}
All three
code blocks are executed because all three expressions return true. We have no
right or wrong here. In cases where you need to use @if - @else then you use
@if - @else. In cases where you need to execute multiple conditions at once you
can simply use @if.
Expression
in @if
There are a
few things to keep in mind with the expression in @if. We have two types in the
expression of @if. It's true and false, you're funny when you hear about it.
However, to prove the above we will analyze some situations in @if. We have
data types including true which are string, number, color and boolean true. The
false data types are null and boolean false. Why do we need to know these
problems? When you want the code block to be executed when the expression is
true. And the code block is not executed when the expression is false.
We can use
data types such as string, number, color, boolean true as a true expression to
execute the code block. Let's look at the example:
// index.scss
@mixin bg-color() {
@if (3) {
background-color: red;
} @if ('string') {
background-color: yellow;
} @if (#444) {
background-color: green;
} @if (true) {
background-color: blue
}
}
.btn {
@include bg-color();
}
We have data
types number, string, color, boolean true used as expression. If the theory is
true that we set out above, then these data types are true, then the code block
will be executed. Let's see the result for the above code.
.btn {
background-color: red;
background-color: yellow;
background-color: green;
background-color: blue;
}
Awesome! Our
theory is correct. The data types all return true, and at the same time the
code blocks are executed. Contrary to the problem above, we have data types
that will return false. It's null and boolean false. Let's go through a
specific example:
// index.scss
@mixin bg-color() {
@if (null) {
background-color: red;
} @if (false) {
background-color: yellow;
} @else {
background-color: white
}
}
.btn {
@include bg-color();
}
We have two expressions using data types null
and boolean false. And we have @else so that in case the code blocks are not
executed, @else will execute our code block. Let's see the result for the code
above:
/* index.css */
.btn {
background-color: white;
}
Completely
coincides with the theory that we have set out that the data type is null and
boolean false will return false, and the code blocks are not executed.
So, you know
the data types number, string, color, boolean true if placed in the expression
will return true. And data types such as null and boolean false will return
false.
Besides
these problems, we also use operators in expressions to compare and connect
expressinos together. This part will be explained in another post.
Can we
don’t use @else?
What if we
don't use @else to execute the code block in case all other expressions are
false. First to answer this question we need to understand what @else will do?
@else will execute the code block in case the expressions in @if all return
false. Thus, if there is no @else then nothing will be executed in this case
all expressions in @if will return false.
// index.scss
@mixin bg-color() {
@if (null) {
background-color: red;
} @if (false) {
background-color: yellow;
}
}
.btn {
padding: 1rem;
@include bg-color();
}
We have both
expressions return false, which means we cannot execute code blocks in these
@ifs. Let's see the result we get in this case will be:
/* index.css */
.btn {
padding: 1rem;
}
Absolutely
no results were recorded. To answer the question whether we can omit @else or
not, the answer lies with you. If your expressions can cover all cases or you
don't need to return false, you may not have to use @else. In case you want to
return all cases other than your expression, you can consider using @else.
Conclusion
We've
covered the cases in @if - @else of SASS/SCSS. About how to use @if - @else,
use @if not, @else if. And we know how to use data types in expression.
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