Sass Tutorials #11 - Build Your Own Function 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 function
skills and sass what we're going to be
doing today is building our own function
now this is very powerful because it can
pretty much do whatever you needed to do
whatever you can come up with and let's
say there's not a built in function
already incest as we went over in the
last lesson you can you can create your
own and have the same functionality so
for the this first example what we're
going to do is we're going to take a
look at a background color let's say the
background color of this div right here
and then we're going to make the text a
lighter shade of this background color
so that it doesn't get you know that
right now it's way too dark for this
background so to build our own function
it's actually pretty easy the first
thing you need to do is do an apt
function and then your functions name so
we're just going to call this text
contrast and inside the parentheses
you're going to put your arguments for
the function so the arguments we want to
take are the background color so we'll
just call us yeah background and we're
also going to take a value and this is
going to tell us how much to lighten it
um you know based on whatever we want so
to say though and then we're going to do
brackets and hit enter so when you're
making a function your goal is to have
it output something right so to output
something you do the ad return and so
this is going to be whatever your
function is going to output so what we
wanted to do is we want to take back
typing background and we want it to add
value to it and then here we're going to
put a semicolon go back to our terminal
as you can see nothing wrong so we're
all good there so now that this function
is created you know
extra document it doesn't do anything
because we're not calling this function
anywhere so to call this function it's
the exact same as when we called the nth
function only called round or percentage
so what we're going to do let's say we
want to edit a number three here we're
going to do class three inside of three
we're going to say the color of our text
is going to be text contrast and then
inside parentheses we're going to pass
it the background color which is black
plus 40 and then the value that we want
to increase the by let's say 100 or save
this out check our cess there's no no
problem sinner refresh and as you can
see color is now a hundred lighter than
the background this isn't bad for
building our first function however
there's lots more you can do with
functions in the next tutorial we're
going to automate this process a little
bit more so it's taking in the function
from this list and it's going to
determine if the background color is
light enough or dark enough and then do
something different based on the value
of the background color once again this
is Scott Olinsky with level up Tut's if
you have any questions feel free to ask
send us a message or hit us up on
Twitter add a level up Tut's alright see
in the next one
but