Sass Tutorials #13 - Build Your Own Function Part 3 - Total Automation with Lists Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott Olinsky with
the level of Tut's and today we're going
to do the third and final lesson for the
functions in sass tutorial using the
function that we've built on the
previous two lessons we're going to be
putting it to use inside of our each
statement and then automating this
process that we had started in the
previous two tutorials so to get started
I want to point out one thing about our
each statement that I didn't mention in
the previous lessons the when you're
recalling the list item here the
function to call a list item is just
this n and then this stuff this pound
and in brackets what it's doing is is
actually pulling the the text or like
the string value so one it's outputting
the word one if we weren't to use this
value here it would not know what to do
because one is not a valid value so in
this case we're outputting the value
here and the value is as you can see
it's this these hexadecimal numbers
right the the color values and the
problem is here is if we wanted to then
take this value and add a hundred to it
sass is going to get upset basically
it's not going to know what to do as you
can see it's outputting the string here
and then it's outputting plus 100 so
that of course won't work
if you need to access the value which we
you know it's not necessary here because
we're just putting the hexadecimal but
it will work this way you just do the
end of your list as you can see we save
this it's going to give us the same
thing the hexadecimal but in this case
it's the value which you can do further
transforming too so what we're going to
do is we're going to transplant this
into this and have this all automate
itself so
going to play it paste this here and
let's delete this so this is going to
say the color of whatever div we're in
it's going to be the text contrast value
and we're going to pass in the enth so
the same is we're gonna pass in the
background so in here we're gonna say
the nth value the second value in our
list so black black plus 20 and then to
switch it up actually let's have white
and then weight minus 20
well let's do a little bit more than let
let's add white minus 50 just so you can
get a little bit of an idea so what it's
going to do is it's going to this list
it's gonna pass in black and so it's
gonna say one has a background color of
black and the color and it's going to
look into this function and say okay
well black is less than 50% so we're
going to lighten this color black by 70%
and we're going to help put that as our
text color and then it's going to run
through of course for each of those
things in our list when it gets to white
it's going to see that white is not less
than 50% so it's going to darken it by
90% and I'll put that here if we save
this and then check our sass and our
terminal looks like everything's fine
there let's look at our CSS just to
check this out to make sure there's no
issues let's see looks like yeah this
everything looks pretty good here so
when we refresh our page we should see
letter text colors here and text that is
90% darker than its back around 90%
darker 70 percent lighter 70% lighter to
get some more contrast in here let's
change this to 92 and we should see
white text on this one and like gray
text on this one so let's check our his
style that CSS and as you can see it's
just about white here it's a lighter
gray here and so this is a really
powerful function here this is
evaluating colors that's passed into it
through a list and then transforming a
different property based on those colors
if you can only imagine all the
interesting sort of functions you can
dream up with using if or else
statements pretty much the limit is your
own imagination as with a lot of sass so
that's it for functions incest in the
next couple of lessons we're going to be
finally digging into compass and a
compass is extremely powerful I'm really
excited to get into that and show you
guys some stuff and we're gonna have
lots of videos on the amazing things you
can do with compass alright until next
time this is Scott Olinsky with level up
Tut's and as always you know subscribe
let send us a comment you know send us
an email let us know what you want to
see or let us know if you have any
questions and thanks for watching bye