Sass Tutorials #10 - Built in Functions Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott talansky
with the level of Tut's and today we're
going to be leveling up your SAS
function skills so today we're going to
go over some functions that are built
into SAS in the next tutorial we're
going to be talking about building your
own functions and the power that comes
along with that
so for our first example we're going to
do something nice and easy we're going
to take this background color of three
three three and we're going to convert
it to an RGB a value and the bore so
we're going to pass it a value for the
Alpha Channel and it's going to make it
transparent based on whatever percentage
we would like it to be so it's really
easy we're just going to do our GBA and
we're going to wrap this in parentheses
and since we have our color value RGB a
just needs an alpha Channel so you do
0.5 we're going to save it and check out
our CSS and it gives us the RGB a value
there RGB and then the alpha is 0.5 so
if we refresh this you can see that it's
become 50% transparent so this is really
awesome there's actually another SAS
function that's built in that's pretty
similar but this is more use do you know
there's one called fade-out theta and
they also of other names out so if we do
fade out it's actually going to give us
the same values it's basically this
one's meant to sort of make something
just transparent although it gives you
the same output it's pretty much a
different idea here behind it okay as
you can see here it's gotten 70%
transparent now so the next thing we're
going to do is get into something really
cool I found on this blog the SAS way
which is a great resource for learning
new things about SAS and what we're
going to do is we're going to use a
built in SAS function called percentage
to take the percentage of two values and
use that value in our CSS the way this
can come in handy is a let's say your
designer gives you the website design
and it's all based on pixels but you're
going to want this design to be fluid
and responsive the way you figure out
those percentages for your for your
containers is based on the container
well it's the thing you're trying to get
the width of divided by the container so
let's say a designer's given you a
layout and it's a 1440 pixels wide and
they want to they want a sidebar on the
left and they want the main content on
the right and the sidebar on the left
needs to be 550 pixels and the main
content needs to be 890 pixels or at
least that's how it is in the design
however since you want this to be fluid
what you would do is you would divide
890 by 1440 a lot of times when working
with these values you're going to get
really long decimals and so you end up
writing these percentages in this case
it would be you know sixty one point
eight zero five five five six percent if
you want to be accurate and you know
that's okay but your CSS can get pretty
I don't know with lots of decimal points
and lots of percentages getting really
tight it might not be super easy if you
want to change something later so an
easy way to get those percentages that
you need of is to use sass and let sass
do the calculations for you so your CSS
stays readable and nice and easy to edit
later so in our first example here we're
going to take the intro div and the
feature div the intro div is this one
right here feature one is this one right
here and we're going to give this hey
let me get some space in here okay we're
going to give this one a width of and
we're going to call percentage and we're
going to wrap it in parenthesis and
we're
to say since this is the intro this is
the paragraph we need to be 550 over
1440 so we're going to do 550 pixels
divided by 1440 pixels and that's going
to be the width of this div if we save
this go to our CSS you can see here it's
given it a width of 38 point one nine
four so it's doing all the math for us
and it's keeping it nice and clean and
this pretty much always relates back to
whatever your original source material
was so let's copy this paste this here
to your feature and then we're going to
say this one is going to be eight
hundred and ninety pixels divided by
1440 so if we refresh you can see they
both now adjusted to their correct size
if we get rid of this border that we
have here save this and let's let the
feature too bright and let's flip the
intro
left oh I've : here okay
refresh you can now see that they are
perfectly fluid and adjust the container
while fitting perfectly into each other
at the correct percentage if you go here
thirty-eight point one nine four sixty
one point eight zero six adds up to one
hundred you know looking at your
fractions here adding 552 890 s a lot
easier than adding these two percentages
or it's a lot more simple I guess to
look at also another cool thing about
these built-in functions is that you can
nest them so let's say you're the type
of person that doesn't even want to deal
with decimals in their CSS if they want
to change it then if you want to change
it later in your C in CSS then you don't
want have to deal with those decimals
and your percentages well lucky for us
SAS has a round function in fact they
have a couple of round functions but the
one we're going to use is
we just round and we're going to wrap
this percentage in round and then wrap
it another parenthesis all right we're
going to wrap this one so what's this
going to this is going to round this to
the nearest whole number and since it's
a percentage it's going to give us it
should give us 30 8 and 62 if we refresh
we shouldn't see much of a change here
because it's still basically the same
percentage difference and as you can see
they both still add up to 100 and
they're both still fluid if you want to
learn more about SAS functions that are
built into SAS check out the on SAS Lang
comm the docs in the script functions
this will give you sort of a resource
for all the built-in functions with
incest and also what parameters they
take and sort of how to use them it's a
really great feature if you check this
out I'm sure you'll learn a lot about
how functions work in SAS well alright
that's it for this tutorial and the next
one like I said we're going to be going
over making your own function and how
powerful that is feel free to subscribe
you know if you want to see more if
there's anything any questions you have
about you know what we're doing or what
you want to learn or anything you know
feel free to leave a comment send us a
message and we'll get back to you as
soon as we can
once again this is Scott and thanks for
watching bye