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

so this is Scott with the level of cuts
and today I'm going to be talking about
Nixon's incest for your fourths ass
tutorial and what Nixon's are there sort
of like variables but for larger chunks
of code and they're really powerful
because you can even pass in arguments
this comes in handy if you have code
that needs to be repeated or even
modified in a slight way and you don't
want to have to rewrite all of it one
thing that comes you know at the time my
head is the example that we're going to
be doing is going to be using border
radius and border radius is a good
example because we need these vendor
prefixes to have the code work on all
browsers and and although you know
sometime this can be taken care of with
another application compass for instance
if you want to look into more compass
you can check that out I'll be doing
tutorials on that later but for now I'm
going to show you how to do this
functionality in sass so I grabbed this
this border-radius code here and we're
gonna make this into a mixin so that we
can use border-radius throughout our
code here without having to retype all
three lines of the vendor prefixes every
time as you can see as we did here for
this background gradient see how it's
sort of cluttering up our s CSS you know
this will just make things a little bit
easier to navigate the only thing I
really did to change this file since
last time is I put a div div with a
class of intro around this first
paragraph and so I'm saying this
paragraph is the introduction paragraph
as you can see over here I gave it a
background color of 333 and then I also
gave this link a rollover state hover
States and I changed its background in
colors just so it stands out a little
bit more on this black background or
this gray background so what we're gonna
do first is using this code from css3
please which is the vendor prefixes
we're going to make our mixin and then
we're going to include our mixin where
ever we want to use it so to define
we need to do is to get to the add sign
and then vixen and then the name of your
mixin and we're just gonna call this
border-radius to keep things nice and
easy and then here you have to well you
don't have to you can make mix-ins that
are just static and you can just reuse
them over and over again but here you
have the option of declaring a variable
or a an argument that you can pass into
this mix in so that you can reuse this
code and you know have it changed to the
way you want it to be so to do a bit to
do an argument you just do the same way
you do a variable in sense you do dollar
sign and because is the radius we're
gonna do rate Diaz and with a really
nice thing is if you want to provide a
default argument all you have to do is
do :
and your default argument will give this
a default of well let's do something
bigger let's do like 20 pixels as the
default and then we're going to do
brackets and inside of the brackets is
where your code goes I'm gonna get rid
of this comment these comments here just
so they don't clutter this up and so
where you have your radius here you can
put your argument and therefore whenever
an argument is passed into this mixin
it's going to use the argument and then
if there's no argument passed in it's
just going to use the default of 20
pixels all right so we have that okay
I'm gonna check SAS to make sure there's
no errors it looks like on line 6
expected a oh you're not supposed to put
a semicolon here that's my fault okay so
now we save it checks ass again and
we're all good nothing's gonna change
here because we haven't told any of our
code to use this mixin yet
so to do that it's really easy and the
first example we're just going to use
the default argument so we're not going
to pass it anything let's see within the
grad div we are going to say @include
and then we're going to do border radius
and then we can just do a semicolon here
because we're not passing it any
arguments I saved that out refresh and
you can see I did and now has a border
radius of 20 pixels and now we want to
add that again to our intro all we have
to do is copy and paste this below
refresh and our intro div now also has a
border radius of 20 pixels so let's say
we want to add a border radius to this
background color on this link right here
but we don't want it to be 20 pixels we
want it to be something more like 10
pixels what we can do is we can paste
this add include border radius right
here we can do parentheses and we can
pass it an argument so I'm going to pass
it 10 pixels I'm gonna save that refresh
and as you can see this now has a border
radius of 10 pixels and that's it for
mix-ins
in the next tutorial we're going to be
going over selector inheritance one of
the other functions assess and then
after that we'll be getting into some
compass and some more advanced
applications of sass and as always if
you have any more questions feel free to
leave us a comment or send us an email
you know also feel free to subscribe if
you want to see more videos or you just
want to you know keep track of what
we're doing this is Scott with level up
tuts and thanks for watching