Sass Tutorials #9 - Nth Function In Lists Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

yo what's up this is Scott to Lensky
with level up Tut's and today we're
going to be leveling up your list skills
within sass so we're going to be doing
some cool stuff with the nth function
and basically the nth function is able
to grab the MPM in a list
so as the this acid acts on their
website point out right here if you grab
the nth item in this list in this case
you're grabbing the first item in this
list it's going to be ten pixels and
let's say you have a list here you're
grabbing the third item it's going to be
sans-serif so we're going to be doing is
we're going to have four paragraphs here
and each are going to be a lighter and
lighter shade of black and we're going
to be accomplishing that with the use of
an each statement and a list and in the
list we're essentially going to have key
values that we're going to use as
classes in our index file I have changed
the paragraph classes so now the
paragraphs have a class of one two three
and four so we're going to be using the
the sort of key values one two three and
four in our list with their associated
background colors to auto populate the
background colors of these paragraphs so
to do this we're going to start off with
a and each statement just like before
and at last time we made our list first
and then we passed in the list to the
each statement this time we're going to
put the list directly in the each
statement just to show you that method
as well because that's another way you
can do it so we're going to do at each
so for each in we're just going to call
this P because it's a paragraph in and
then we do parentheses and so now what
we're going to do is we're going to put
our key value so it's going to be one
and then we're going to do black and
then comma for the next item in the list
I'm going to do two
and we're going to do black plus 20
comma 3 black plus 40 comma 4 black plus
60 ok and now because we're still in our
each statement we're saying you know go
through this list and run it each of
these times and within here we're going
to start brackets and in our brackets
we're going to say dot for the class and
then just like before we used the pound
sign and then I'm sorry
then bracket and then we're going to do
N and so what this is going to be saying
is we're going to look within the the
list which we've declared as P so we're
going to say the and we want the first
item so this is looking it's passing at
this this list 1 and black and so we're
going to say give us the first value
which is 1 and that's going to be
assigning it to our class ok and then
just like normal CSS you have your
brackets and within here I'll just keep
this on the same line we're going to do
background and we're going to set our
background to the same thing but it's
going to be pound bracket N and then
parentheses and we're going to grab from
the same list so P comma and this time
we're going to be grabbing the second
value which is 2 and then we're going to
close our brackets and so let's make
sure this is all good so we're going to
basically be saying for each in each
item in this paragraph give the first
item as the class and the second item as
the background color I'm going to save
this off to here there's no no problems
we can check out our CSS the
pilot CSS and you can see it's given us
a let's see the the paragraph of the
class of one has black two is ten twenty
up forty up sixty up so save this and
let's refresh our page and as you can
see they're getting it goes from flat
black all the way up so if you can
imagine the possibilities of using lists
like this is really limited to your own
creativity and and I still find things
every day interesting applications all
sorts of different things I thought this
was a really great interesting example
to show you guys if you have any
questions about this feel free to let us
know once again this is Scott with level
up tuts and thanks for watching bye