Sass Tutorials #15 - For Loops Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with level
up Tut's and today we're going to be
going over for loops in SAS but before
we get into that I wanted to make note
of this website right here it's Michael
P McMillan comm and Mike McMillan is a
very talented designer and developer out
of Ann Arbor Michigan and he is the one
who designed this our beautiful logo as
you can see here and it's just really
great we're really really happy with it
and you know you should check out his
site he does a lot of great work so I
just wanted to point you that direction
before we got started so what we're
going to do today is we're going to use
cest to write a for loop and we're going
to increment something every single
round so basically what I want to do is
I want to add a margin to each one of
these paragraphs and I want to do it one
through four so what I've done here is
unless index file you know I just have
pair one pair two pair three these
aren't necessarily something I would
name my classes right now but for this
example it works perfectly fine
so as you can see we just have pair -
one through four so the SCSS we've been
working with is pretty similar except I
don't have any classes on any of the
paragraphs really other than this one
that we ran before where we changed the
background color
so to get started let's just write our
for loop so to do that we're going to do
it just like we did our functions just
like we did our each statement and we're
going to start off with an at and then
we're going to say at 4 and then we're
going to have our incrementing variable
and this is going to be just we're going
to call this dollar sign I so now we're
going to decide what our loop is looping
through we're going to say from 1
through 4 so you actually type 1 through
4 and then brackets so what this is
really saying is that it has this value
I and it's going to start at 1 and every
single time that loops through this it's
going to increment this I by 1 until it
gets to 4
and then that will be its last time
through so if you remember before we use
interpolation to get the value of I
we're actually going to do that for our
class name so we're going to start up
this by saying dot and then we said our
class was power - if you remember the
interpolation it's really just pound
brackets and then your variable name
inside here so it's just I so this is
going to output power - one power - to
power five and three just like we had
before and then inside the brackets
we're going to put our CSS and we're
going to say margin-left actually let's
do this margin right for fun because
that's awesome it's a lot of fun okay
and we're going to say let's do this 20
pixels and we're going to multiply it by
our variable I so every single time
through that's going to get this margin
right more and more and more okay so
let's say this and let's look at our CSS
and let's scroll down you can see pair 1
is a margin rate of 20 pixels power 2
has a margin rate of 40 pixels 60 and 80
so let's check it out let's see what
happened refresh as you can see our
margin right is slowly every single time
incrementing and getting a little bit
further and further out looks by 20
pixels so that's the basics of a for
loop you can do all sorts of stuff with
a for loop but the basic premise is is
that you are going from a number to
another number and that's pretty much as
far as it goes you can start at anything
you choose let's say if we started at 2
and went through 8 it would do all of
those but of course we don't have
paragraphs for all those values so it
doesn't really much matter in this
example so you won't see that but I'd
let you know that you can go and
increment straight through anything so
that's using a for loop in SAS in the
next lesson we're going to go over while
loops and a while loop is just a little
bit more advanced version of a for loop
incest it allows you to control such
things like you're incrementing amount
so you're not just going from you know
one number every single time add one
till you get to another number so it'll
just give you a few more options in your
SAS arsenal
once again this is Skye
with level of HUD's thanks for watching
if you have any questions or comments
let us know we love hearing from you
alright thanks that