IT & Software Exam > IT & Software Videos > Introduction to Software as a Service (SaaS): Beginners Guide > Sass Tutorials #16 - While Loops
Sass Tutorials #16 - While Loops Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
FAQs on Sass Tutorials #16 - While Loops Video Lecture - Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
| 1. What is a while loop in Sass? |  |
Ans. A while loop in Sass is a control structure that repeats a block of code as long as a specified condition is true. It allows for efficient and dynamic looping in Sass code.
| 2. How is a while loop different from a for loop in Sass? | |
Ans. While both while loops and for loops are used for repetitive tasks in Sass, they differ in their syntax and usage. A while loop continues to execute as long as a condition is true, whereas a for loop executes a specific number of times based on an iterator variable.
| 3. Can I use a while loop in Sass to iterate over a list or map? | |
Ans. No, a while loop in Sass is not designed to iterate over a list or map directly. It is typically used for executing a block of code repeatedly based on a condition, rather than iterating over a collection of values. For iterating over lists or maps, it is recommended to use Sass's built-in functions or other looping constructs.
| 4. Are there any limitations or considerations when using while loops in Sass? | |
Ans. While using while loops in Sass, it is important to ensure that the condition eventually becomes false to avoid infinite loops. Additionally, complex logic or excessive computations within the loop can impact performance. It is recommended to carefully design and test the condition and code within the loop to avoid any unintended consequences.
| 5. Can I nest while loops within other control structures in Sass? | |
Ans. Yes, while loops can be nested within other control structures, such as if statements or for loops, in Sass. This allows for more complex and dynamic control flow in Sass code. However, it is important to maintain clarity and readability when nesting control structures to avoid confusion and potential errors.
Text Transcript from Video
test hey what's up this is Scott with
the level of Tut's and today I'm going
to be showing you how to use a while
loop with sass but before we get started
I wanted to point out something this
week I launched my first marketplace
Tut's plus calm tutorial series and it
is for sale for $8 it's called sass
mastery well if you've gone through
these videos on YouTube I'm not going to
say you're going to learn a whole lot
more than what's on these videos I will
say however that the videos are been
higher quality the average length is
about 10 minutes there's 10 videos it
comes with source code and um all the
text is a nice large size nice and easy
to read
so if you've enjoyed these tutorials and
you want to support a little feel free
it's only eight dollars if not no big
deal so to get started here we're just
going to work off of what we had last
time with the for loop however I'm just
going to go comment this out save this
here so our while loop is a lot like our
for loop in fact it's almost just like
it however it allows us a little bit
more flexibility so just like we started
before with at it's at while and then
now we're going to specify some
condition so before we did for our
incrementing variable from 2 through 8
or whatever now you need to actually say
your variable let's say you're
incrementing variable and while it is
something so some condition this can be
you know while this is equal to 50 and
then you run through various statements
and then eventually having something
that turns I into 50 and then that will
stop this loop or you could do something
similar to the for loop and you can just
say you know while I is less than 5 and
that will run I 1 through 4 so to show
you how this works we'll just build our
same loop that we had before and just a
little bit differently so inside here we
have our brackets and just like before
we're going to do that power - and then
using interpolation will just do pound
bracket dollar sign hi
and then we're going to have our CSS
this time per phone will do margin left
margin left and then we're going to say
maybe this one will be a bit more
drastic we'll say 100 pixels times
dollar sign I okay so now if we save
this we're going to get some sort of an
error with our sass in fact if we look
at terminal it's going to say eye is not
defined that's because with a while
function you need to define your eye
ahead of times the four is actually two
defining your eye here and then running
through these however here it's
expecting that this eye is already
defined so just like we declare any
other variable all we have to do is do
dollar sign I : and then our value this
is going to start at one okay so we also
have one more problem here if we run
through this it's you know it's not
really going to do a whole lot because I
is equal to 1 I is less than 5 it will
run through this once and then I'll just
keep outputting the same thing power 1
margin left times 100 okay so you need
to increment your eye somehow so inside
of our while just like in a function in
JavaScript or something you can just do
dollar sign eye and then you would do :
just like you're declaring it and then
you would say a dollar sign I plus 1 so
this time every time you run through
your loop is going to increase by 1 and
it's going to go through this so this
should be pretty much the exact same as
our for loop except for you we're doing
a margin left and 100 pixels instead of
what we had before so if we save this
let's check out our CSS first so you can
see power 1 we have 100 pixel margin
left R 2 R 3 okay so let's check out our
HTML we refresh you can see our margins
are going 100 200 300 400 perfect
excellent so now let's try something a
little bit different a little bit more
interesting we're going to recreate this
black to gray to white to gray we're
going to recreate that in a sort of
white using a while loop so I'm just
going to go ahead and comment out
this each one where I called my text
contrast and we're going to use this
text contrast function and this function
if you remember is checking to see
whether the background is a lightness
value that's less than 50% or if it has
a darkness value X if I'm going to
change it a little bit I'm going to say
it's going to return two things it's not
going to return a darken version of the
background color it's just going to
return white or black text this way it's
just going to be white or black
depending on the color of the background
not a huge change here okay so we're
going to call our text contrast on the
background color and we're going to set
the background color and it's going to
change every single time so we're going
to declare a new variable before a while
loop here and we're just going to call
this power BG for paragraph background
we're going to colon and then we're
going to give this a value of zero zero
zero it's going to be black we'll just
type black okay and so in here we're
going to give it a margin left of 100
pixels whatever we're going to give it a
background of dollar sign power BG and
we're going to give it a color of and
we're going to use our text contrast
function so I'm just going to grab this
and we're going to pass it that same
value we're going to pass it the power
BG okay now while we iterate through
this we want this background to get
progressively lighter so we're going to
do the same thing we did with our
incrementing I and we're going to say
dollar sign power B G :
so that dollar sign power BG is equal to
and we're going to call a built in sass
function lighten and we're going to pass
it dollar sign power BG comma and then
we're going to line this by 25%
so to step through this the first time
we run through it's going to set our
first paragraph paragraph one it's going
to have a margin left of 100 pixels
times 1 or 100 and it's going to have a
background of black and it's going to
have a text color of white after it runs
through this text contrast function once
we're done with that we're going to
lighten the paragraph background by 25%
and we're going to increment our I so
it's going to run through this loop
again this time I is equal to 2 so
paragraph 2 margin left is going to be
100 times 2 or 200 pixels our background
is going to be 25% lighter black and our
text color is still going to be white
and then for the next two we should see
the text color get black and then black
in the background will get lighter and
lighter so we save this let's look at
our CSS see what we have as you can see
there is some sort of a problem here it
looks like it's not getting our color
from this text contrast function it's
actually because our function is
declared down here and we're trying to
use it before it's declared so it's no
biggie actually just make sure I grabbed
this whole thing and we're going to put
it up top here okay so now that it has
the ability to see this text contrast we
are going to check our CSS and as you
can see the backgrounds black text is
white background is gray the text is
white the backgrounds lighter gray the
text is black let's check this out in
our HTML file if we refresh you can see
it goes incrementally black to light
gray and our text adjusts accordingly so
that's how to use while loops incest as
always if you have any questions or
comments feel free to leave a comment on
one of the videos or hit us up at
Twitter at LevelUp tuts
this is Scott and thanks for watching
the level of Tut's and today I'm going
to be showing you how to use a while
loop with sass but before we get started
I wanted to point out something this
week I launched my first marketplace
Tut's plus calm tutorial series and it
is for sale for $8 it's called sass
mastery well if you've gone through
these videos on YouTube I'm not going to
say you're going to learn a whole lot
more than what's on these videos I will
say however that the videos are been
higher quality the average length is
about 10 minutes there's 10 videos it
comes with source code and um all the
text is a nice large size nice and easy
to read
so if you've enjoyed these tutorials and
you want to support a little feel free
it's only eight dollars if not no big
deal so to get started here we're just
going to work off of what we had last
time with the for loop however I'm just
going to go comment this out save this
here so our while loop is a lot like our
for loop in fact it's almost just like
it however it allows us a little bit
more flexibility so just like we started
before with at it's at while and then
now we're going to specify some
condition so before we did for our
incrementing variable from 2 through 8
or whatever now you need to actually say
your variable let's say you're
incrementing variable and while it is
something so some condition this can be
you know while this is equal to 50 and
then you run through various statements
and then eventually having something
that turns I into 50 and then that will
stop this loop or you could do something
similar to the for loop and you can just
say you know while I is less than 5 and
that will run I 1 through 4 so to show
you how this works we'll just build our
same loop that we had before and just a
little bit differently so inside here we
have our brackets and just like before
we're going to do that power - and then
using interpolation will just do pound
bracket dollar sign hi
and then we're going to have our CSS
this time per phone will do margin left
margin left and then we're going to say
maybe this one will be a bit more
drastic we'll say 100 pixels times
dollar sign I okay so now if we save
this we're going to get some sort of an
error with our sass in fact if we look
at terminal it's going to say eye is not
defined that's because with a while
function you need to define your eye
ahead of times the four is actually two
defining your eye here and then running
through these however here it's
expecting that this eye is already
defined so just like we declare any
other variable all we have to do is do
dollar sign I : and then our value this
is going to start at one okay so we also
have one more problem here if we run
through this it's you know it's not
really going to do a whole lot because I
is equal to 1 I is less than 5 it will
run through this once and then I'll just
keep outputting the same thing power 1
margin left times 100 okay so you need
to increment your eye somehow so inside
of our while just like in a function in
JavaScript or something you can just do
dollar sign eye and then you would do :
just like you're declaring it and then
you would say a dollar sign I plus 1 so
this time every time you run through
your loop is going to increase by 1 and
it's going to go through this so this
should be pretty much the exact same as
our for loop except for you we're doing
a margin left and 100 pixels instead of
what we had before so if we save this
let's check out our CSS first so you can
see power 1 we have 100 pixel margin
left R 2 R 3 okay so let's check out our
HTML we refresh you can see our margins
are going 100 200 300 400 perfect
excellent so now let's try something a
little bit different a little bit more
interesting we're going to recreate this
black to gray to white to gray we're
going to recreate that in a sort of
white using a while loop so I'm just
going to go ahead and comment out
this each one where I called my text
contrast and we're going to use this
text contrast function and this function
if you remember is checking to see
whether the background is a lightness
value that's less than 50% or if it has
a darkness value X if I'm going to
change it a little bit I'm going to say
it's going to return two things it's not
going to return a darken version of the
background color it's just going to
return white or black text this way it's
just going to be white or black
depending on the color of the background
not a huge change here okay so we're
going to call our text contrast on the
background color and we're going to set
the background color and it's going to
change every single time so we're going
to declare a new variable before a while
loop here and we're just going to call
this power BG for paragraph background
we're going to colon and then we're
going to give this a value of zero zero
zero it's going to be black we'll just
type black okay and so in here we're
going to give it a margin left of 100
pixels whatever we're going to give it a
background of dollar sign power BG and
we're going to give it a color of and
we're going to use our text contrast
function so I'm just going to grab this
and we're going to pass it that same
value we're going to pass it the power
BG okay now while we iterate through
this we want this background to get
progressively lighter so we're going to
do the same thing we did with our
incrementing I and we're going to say
dollar sign power B G :
so that dollar sign power BG is equal to
and we're going to call a built in sass
function lighten and we're going to pass
it dollar sign power BG comma and then
we're going to line this by 25%
so to step through this the first time
we run through it's going to set our
first paragraph paragraph one it's going
to have a margin left of 100 pixels
times 1 or 100 and it's going to have a
background of black and it's going to
have a text color of white after it runs
through this text contrast function once
we're done with that we're going to
lighten the paragraph background by 25%
and we're going to increment our I so
it's going to run through this loop
again this time I is equal to 2 so
paragraph 2 margin left is going to be
100 times 2 or 200 pixels our background
is going to be 25% lighter black and our
text color is still going to be white
and then for the next two we should see
the text color get black and then black
in the background will get lighter and
lighter so we save this let's look at
our CSS see what we have as you can see
there is some sort of a problem here it
looks like it's not getting our color
from this text contrast function it's
actually because our function is
declared down here and we're trying to
use it before it's declared so it's no
biggie actually just make sure I grabbed
this whole thing and we're going to put
it up top here okay so now that it has
the ability to see this text contrast we
are going to check our CSS and as you
can see the backgrounds black text is
white background is gray the text is
white the backgrounds lighter gray the
text is black let's check this out in
our HTML file if we refresh you can see
it goes incrementally black to light
gray and our text adjusts accordingly so
that's how to use while loops incest as
always if you have any questions or
comments feel free to leave a comment on
one of the videos or hit us up at
Twitter at LevelUp tuts
this is Scott and thanks for watching
About this Video
4.76/5
Rating
Sep 23, 2025
Last updated
Related Exams
Video Description: Sass Tutorials #16 - While Loops for IT & Software 2025 is part of Introduction to Software as a Service (SaaS): Beginners Guide preparation.
The notes and questions for Sass Tutorials #16 - While Loops have been prepared according to the IT & Software exam syllabus.
Information about Sass Tutorials #16 - While Loops covers all important topics for IT & Software 2025 Exam.
Find important definitions, questions, notes, meanings, examples, exercises and tests below for Sass Tutorials #16 - While Loops.
Introduction of Sass Tutorials #16 - While Loops in English is available as part of our Introduction to Software as a Service (SaaS): Beginners Guide for IT & Software & Sass Tutorials #16 - While Loops in
Hindi for Introduction to Software as a Service (SaaS): Beginners Guide course. Download more important topics related with notes, lectures and mock test series for
IT & Software Exam by signing up for free.
Description
Video Lecture & Questions for Sass Tutorials #16 - While Loops Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software - IT & Software full syllabus preparation | Free video for IT & Software exam to prepare for Introduction to Software as a Service (SaaS): Beginners Guide.
Information about Sass Tutorials #16 - While Loops
Here you can find the meaning of Sass Tutorials #16 - While Loops defined & explained in the simplest way possible.
Besides explaining types of Sass Tutorials #16 - While Loops theory, EduRev gives you an ample number of questions to practice Sass Tutorials #16 - While Loops tests,
examples and also practice IT & Software tests.
Related Searches
study material
,Exam
,ppt
,Summary
,Extra Questions
,Sass Tutorials #16 - While Loops Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,shortcuts and tricks
,Sass Tutorials #16 - While Loops Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,Free
,Objective type Questions
,Sass Tutorials #16 - While Loops Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,Important questions
,video lectures
,Sample Paper
,Viva Questions
,past year papers
,mock tests for examination
,practice quizzes
,MCQs
,Semester Notes
,Previous Year Questions with Solutions
;
Study Sass Tutorials #16 - While Loops on the App
Students of IT & Software can study Sass Tutorials #16 - While Loops alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the Sass Tutorials #16 - While Loops,
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of Sass Tutorials #16 - While Loops is prepared as per the latest IT & Software syllabus.
|
© EduRev
|
Education Revolution
|
|
Signup to see your scores
go up
within 7 days!
within 7 days!
Takes less than 10 seconds to signup