Sass Tutorials #6 - Creating Configurable Shapes Using Mixins Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with level
up Tut's and today we're going to be
leveling up your sass skills I thought
it would be nice before we got into
compass to add a few more things to our
sass basics lessons that I haven't
covered yet and one of it is just sort
of a hammering home what you can do with
mix-ins and this will be using a mix in
with an if-else statement in this video
we're going to be making a couple of
shapes as in a circle and a triangle and
in in these cases we're just going to be
using anchor links so they can click on
as you can see nothing's showing up
right now because I'm using an image
replacement I'm actually using a
modified version of the image
replacement technique that's in the
latest version of html5 boilerplate if
you haven't seen it this blog post that
it was actually March 6th 2012 explains
a little bit about how that works it's
pretty cool and so right now I mean you
would typically see some text let's say
if I comment this out you'll see our
circle in our triangle links so let's
put that back okay so first off we want
to build our circle mixin so if you
remember from the Nixon tutorials we're
going to do at Nixon and then here we're
going to give it a name so it's going to
be circle and in the circle mixin we're
going to pass it one parameter and we're
going to create the circle with with
just that parameter so we're just going
to pass it pass it the width that you
would like to give it and if you're not
familiar with uh with creating circles
within CSS it's pretty simple basically
you just have an item that has the same
width and height and then the border
radius is at least half of that with
their height on all of the edges and
then it will make a circle so this is
going to automate that a little bit so
within our mixin we are just going to
I'm going to grab the border radius from
css3 please of course when we get into
compass in the next couple of tutorials
you won't have to do this anymore
see just delete these comments out okay
so if you recall with mix-ins before
with anything you use your variable and
replace of the border radius but since
we you know we don't you know what
anything more than we have to have we're
going to divide that width by two
because that's all we need for the
border radius so that it creates a
circle and the width is going to be of
course the width and height is going to
be also with okay so now if we pass it
if we want to use that mixin we do
@include circle and then whatever our
desired with this let's do 100 pixels
just so we can see it in action we
refresh there's our circle we do 200
pixels save even larger circle and so
you know we could even do other things
let's say you wanted to add the
background as being a another parameter
you could just do you know color and
then transplant that into here and this
will you know save you just a little bit
more cone get rid of this
and then now we're going to pass it that
comma and then our color value refresh
okay now we can change it all around
whenever need and it's always going to
give you same circle so that's creating
a circle within SAS as a mixin what if
we wanted to create a triangle if you're
not familiar with creating triangles in
CSS it's pretty simple so you can see on
CSS tricks you're pretty much giving it
it's the way that that borders sort of
the way that borders fill in their width
if you give a let's say in this case you
give a left border a large width and
then create a top and bottom border but
then set them to transparent it's going
to create these triangular edges so by
having a large border left it's creating
an arrow pointing right so we want to
make this mixin nice and configurable so
we're going to be passing it up so we're
going to be passing it the width we're
going to be passing it the direction and
we're going to be passing it a color
because in this case we're going to have
to be passing it the color because
you're declaring the color on the border
not on the background so I mean you
could probably get to give it a border
color without side but this might be a
little bit nicer for when you're coding
so the way we're going to do this is
with a large if and else statement so
we're going to do if and we're going to
do if the direction is equal to I'm
going to say up and we're going to want
to grab this code here so you could
actually take this width and height out
of here and put it on your your triangle
but since we want this mixin to generate
all the things that we need for a
triangle anyways we might as well just
leave it in there so this is going to be
a upwards triangle so we want to border
left border right and border bottom the
border bottom of course is the only one
that's going to be receiving our color
the other ones do need to receive our
width however okay so next we're going
to do an ADD else if and then we're
going to check the direction again and
we're going to do direction is equal to
whoops - down keep it same ways is here
we'll just copy and paste this here and
this time
we want to change since it's going down
keep it left and right
however we're just going to have this be
border top okay so right now it's
checking direction and then passing your
color and width so if we check our
terminal there should be no issues and
if we want to call this mixin right now
we can so let's actually just test it
out to make sure everything's going fine
so I'm going to do add include and then
we're going to triangle and then in
triangle of course we're going to pass
it will give it 200 pixels width we're
going to say it's up and we're going to
give it a color of eight eight eight
save that out refresh our document and
there's our large triangle
it's actually really cool so now if we
change this to down save refresh
there's our down triangle so if you
notice our triangles actually twice as
large as our circle even though we both
have 200 and 200 well it's the way that
CSS triangles work this border is 200 in
this border is 200 so if we want this
triangle to be if we want this triangle
to be the same width is the circle we're
actually going to have to divide all of
these by 2
so now you can see that the the triangle
is the same width so if we finish this
out like I've already done I'm just
going to paste it here you can see I
didn't divide by 2 on the widths because
when you're going left and right the
width is actually going to be this
distance here so as you can see if we go
to the right here you can see it's 200
pixels wide so if we wanted something
that was you know only 100 hundred
pixels wide you know it's as simple as
that so now we have this reusable mix in
here that anytime we want to change any
or we think you want to add like a block
element to become a triangle we just can
pass this past a color value in for fun
let's just pass in red say fresh and now
we have triangles well that's it for
this lesson if you have any questions or
comments please feel free to leave a
comment on one of our youtube videos or
send us a message directly once again
this is Scott with level up tuts and
thanks for watching