Sass Tutorials #12 - Build Your Own Function Part 2 - If Else 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 be further leveling up your sass
function skills and we're going to be
doing in these next two tutorials is
taking this function that we had here
and then using some of the lessons that
we learned in the past videos with this
each statement and we're going to make a
really really cool sort of automated
piece here for you so if you checked out
the sass functions page you would have
noticed a function that's built in
called lighten and then you might have
wondered why we just built a function
that all it did was lighten the the
color here well what we're going to be
doing is we're going to be expanding a
little bit on what you can do with
lighten based on the background color
more more importantly we're going to be
using if statements to check this value
and then do something different based on
the actual lightness value of the
background so to get started we're
actually going to get rid of the value
here we're going to get rid of this part
and we're just going to use
Sasa's built-in lighten function so
we're going to lighten the background by
70% so now here in our function let's
get rid of this too we're passing it by
black plus 40 and if you'll notice the
text got quite a bit lighter because 70%
is greater than that plus 100 we had
before so what we need to do is we need
to build out our if statement so that it
accepts this value decides whether it is
letter than darker letter or darker and
then lightness or darkens the text based
on what you have so that protects
contrast nicely with the background so
if what we're going to do is we're going
to do if and then another built in sass
function called lightness is going to
give us the percentage of lightness that
the color is so we're going to do light
and we're going to find out the
lightness of the background and we're
going to say if that lightness of the
background is less than 50% so let's say
it's a darker a darker gray we want the
text to be lighter so we're going to do
brackets here and so inside this if you
do bracket so if the lightness of this
color is less than 50% so if the color
is dark then we're going to lighten that
text by 70% also we'll need to do an
else to cover if the background is
lighter than 50% so we're going to do
add else and then bracket side here
we're going to return sort of lighting
this time we're going to return the
darken text so dark in parentheses
background comma and we're going to
darken this by 70% as well and then
semicolon so I'm going to save this off
check our terminal here no problems so
here we're passing in this black 40 and
if this black plus 40 is less than 50%
in the lightness value we're going to
lighten the text so that it's
contrasting and since it should be we
should see no change here if you refresh
no change we can check out our CSS and
it's given us the hexadecimal color
value here so let's try an example where
the text is actually going to be lighter
in fact let's just use white so we're
going to pass here and then for the
background if you're calling the
statement we're just going to give this
a background of white so we should see
the text color is 70% darker than white
and the background should be white and
as you can see we have a darker gray
text and a white background if we want
to make this more extreme you could
darken this by the same 90% refresh and
you'll see an even darker text
so because this looks a little bit nicer
here we always kind of I guess we want
to will darken this up a little bit more
the lighter this gets that way that the
text is nice and darkened so the
contrast is nice so that's it for this
in our next lesson we're going to show
you how to put this function to use
inside of our each statement in our list
so to automate this process here and
what that's going to do is it's going to
look at any of these backgrounds and
then adjust the text accordingly alright
once again this is Scott with level up
Tut's if you have any questions as
always leave a comment shoot us a
message subscribe if you enjoy these
videos you want to see more and thanks
for watching but