Welcome back to series about SASS/SCSS. If you love this topic, this is link for you follow other articles. Series about SASS/SCSS.
In this article, we discuss about @for and @while in SASS/SCSS. And I have an article about @each, I hope you read this before you go to the content of this article. Article about @each.
Table of
contents:
- What is @for in SASS/SCSS?
- @for from to vs @for from through
- Nested @for
- @while in SASS/SCSS
Let’s go to
the content!
What is
@for in SASS/SCSS?
For @each,
you will easily retrieve the elements in a list, map or a destructuring. However,
you will be limited by traversing the elements. As for handling jobs in a
range, more specifically from one number to another, @each is quite difficult
to handle. So, we use @for to make up for the weakness of @each.
We have the
@for rule written that is @for <variable> from <expression> to
<expression> or @for <variable> from <expression> through
<expression>. As with most rules written, we have @for representing the
use of for in SASS/SCSS. <variable> is a naming representation of objects
that are iterated over. <expression> in @for are usually numbers. As for
the difference between to and through, we will discuss in more detail in the
following section. Let's go through an example of how to use @for in SASS/SCSS.
// index.scss
@for $i from 0 to 4 {
.btn:nth-child(#{$i}) {
padding: $i + rem;
}
}
We have “$i”
as a variable representing each element iterated over in the range from 0 to 4.
Let's see the result we get in the code above.
/* index.css */
.btn:nth-child(0) {
padding: 0rem;
}
.btn:nth-child(1) {
padding: 1rem;
}
.btn:nth-child(2) {
padding: 2rem;
}
.btn:nth-child(3) {
padding: 3rem;
}
Through the
above code, we can see the following problems. “from <expression>” is the
smallest value we can traverse, “to <expression>” is the largest value we
get, with step 1. Each step will increment by one value after each iteration.
We see that with the above code is count. How about the count down?
// index.scss
@for $i from 3 to 0 {
.btn:nth-child(#{$i}) {
padding: $i + rem;
}
}
The result
we get will be:
/* index.css */
.btn:nth-child(3) {
padding: 3rem;
}
.btn:nth-child(2) {
padding: 2rem;
}
.btn:nth-child(1) {
padding: 1rem;
}
We can count
as well as count down depending on how we set the limit from … to …
@for from
to vs @for from through
We already
know how to use @for. Now we need to distinguish when we should use
"through” when we need to use "to". Let's go through an example
to distinguish the two cases above.
// index.scss
@for $i from 0 to 2 {
.btn:nth-child(#{$i}) {
padding: $i + rem;
}
}
@for $j from 3 through 5 {
.card:nth-child(#{$j}) {
margin: $j + rem;
}
}
And let's
see the difference:
/* index.css */
.btn:nth-child(0) {
padding: 0rem;
}
.btn:nth-child(1) {
padding: 1rem;
}
.card:nth-child(3) {
margin: 3rem;
}
.card:nth-child(4) {
margin: 4rem;
}
.card:nth-child(5) {
margin: 5rem;
}
We can see
that when we use “to” the end value is not taken, we just use “end – 1”. As for
using "through", we also use the last value "end". So, we
know the difference between "through" and "to", depending
on the case that you can use it reasonably.
Nested
@for
Next, we
will go through what nested in @for will look like?
// index.scss
$result: 1;
@for $i from 1 to 3 {
@for $j from 1 to 3 {
$result: $result + ($i * $j);
}
}
.header {
width: $result + rem;
}
We use two
@for to iterate over the numbers and multiply the numbers together and we get the
result. Let's see what the result will be:
/* index.css */
.header {
width: 10rem;
}
Like most
other programming languages, nested @for is completely simple and easy to use. However,
there is a problem with @for that is the step of @for each iteration is 1. We
can hardly manipulate this step. So to fix this. We will continue to use
another loop that is @while. Let's see how @while comes true.
@while in
SASS/SCSS
The @while
rule written is @while <expression> {…}. When expression return true.
This continues until the expression return false.
As described
in a previous post. We have the truthy and falsy types, applied to @while's
<expression>. So, if the <expression> of @while still returns true,
the code block will still work. Let's see how the actual application will be.
// index.scss
$count: 0;
@while ($count <=5) {
.btn:nth-child(#{$count}) {
padding: $count * 2rem;
}
$count: $count+2;
}
As shown
above, we see that @for will be limited by step = 1. So in @while we will
increase step = 2. And there is a note when using @while that we have to put
the <expression> condition and we have to set it a specific step, if
there is no step then it will cause "stack overflow", ie our loop
loops without stopping, but the computer's memory is limited. Let's see the
result we get in the above code will be:
/* index.css */
.btn:nth-child(0) {
padding: 0rem;
}
.btn:nth-child(2) {
padding: 4rem;
}
.btn:nth-child(4) {
padding: 8rem;
}
Awesome! One
caveat is that, in most situations, we should use @each to get elements in a
list, map or destructuring. @for in traversing within a word limit from number,
to number. And @while in case, we want to adjust the step of the loop. In terms
of performance, @while is completely slower than @for and @each. And @for,
@each handle most cases, and @while handle some special exceptions.
Conclusion
We've gone
over how to use @for and @while. From there we can derive the cases in which we
should use @each, @for and @while. At the same time, while using @for we can
also distinguish "to" and "through".
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