Sass Tutorials #3 - Nesting Your Sass Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with the
level of Tut's and today I'm going to be
talking about nesting in sass in your
third sass tutorial and last time we
talked about variables and so we're
going to pick up right where we left off
I'm not going to show you how to start
up sass because I'm just leaving it
running and basically if you need to
know how to start sass you can refer to
the previous sass variables tutorial or
the installing sass tutorial to show you
how to start that up so I didn't do too
much to change this document you can see
I still have our variables up here the
only thing I did is I added this second
h2 tag that's within the this grad div
here and then a that I added a class of
pair one to the first paragraph and then
I added an anchor tag in here as well so
what I'm going to show you is how you
can nest styles to save you some time
writing code so typically if you were
going to style this anchor tag
specifically let's say you only want to
style this one and have it not be
affected by the stylings that have for
any of the other anchor tags are not
affecting the other ones you would
typically have to do some sort of okay
you know it's in it's in class you know
paragraph one and then it's an anchor
tag within that or if you want to get
more specific you can say it's in grad
and then it's in pair one and then it's
the anchor tag and so what happens is
you end up writing say you want a style
you know grad you have your styles for
grad and then you want a style
specifically pair one inside of bread
you'd have to do grad pair one alright
and then your styles and then you'd have
to do to access that anchor tag
specifically grad pair one anchor so um
you know this is you know it's fine it's
how we've been writing CSS for a long
time but it can be a lot faster with the
SAS
so since we want to do it inside of
grade one all we have to do is put it
inside of grad one so you see your
inside of your right bracket here we're
going to tab over just like where you
put your CSS properties normally you
would say a pair one and the near
brackets and I'll let enter here what
you can see is what happens here is that
sass it's going to now know that because
this pair one is inside of grad that
it's going to automatically convert that
in your CSS for you to what we had just
typed previously and even let's go one
deeper and we want to do the anchor tags
inside a pair one we can do it here so
let's say we want to make this font size
you know 20 pixels for some reason we'd
save that and if you'll notice only this
anchor tag within this paragraph has 20
pixels and even though we're only
calling anchor there's nothing every
there's nothing before like before it
knows that it's grad pair anchor you
know this can be really handy if you're
writing at your CSS a lot of times I
find it's really great it keeps things
really organized so let's go back to
here we only want this indentation to
happen inside of the heading or the
header so in our code we notice that
inside the header is this h1 and this h2
and this one isn't so if we open this up
we can then copy and paste or let's cut
these out of here and specifically these
H tag properties we can have in here and
now it's only going to affect those save
it refresh and you can see this one
doesn't have the styling so that the
other one had if we want we can pull up
my CSS file and you can see the changes
more specifically see
so you can see here it's rewritten us to
be grad pair one anchor and then have
the CSS it keeps the tapping you know
which can be good or bad if you're going
to look at it later I don't know how you
write your CSS I would typically just
write mine you know on the same you know
tab here however when you start nesting
things inside of things inside of things
you know the sort of tabbed tab layout
of your CSS can be sort of useful you
know it's it's certainly not a bad thing
you can always format
I usually minimize my CSS anyways so it
doesn't really matter what the display
of the live CSS document is looking like
anyways you know but just if you want to
look at it later that's what it does if
you'll notice that it didn't actually
add anything that's grad pair one
because it does there's nothing written
here you know if we wanted to do let's
give this a color of for fun let's just
use the variable from last time blue
save refresh this all has the color blue
now and nothing else does we'll go back
to our CSS and you can see it's now
added this pair one CSS so you know
nesting is really simple and sort of
something that you just do when you're
writing at your CSS and you get really
used to it and I find that a going back
to regular writing regular CSS just
seems really time-consuming now after
getting so used to this so that's pretty
much it for nesting it's a really simple
concept not a whole lot to it but it
saves you a lot of time in the long run
and makes organizing your CSS file
really nice really nice to find things
there's never really any confusion about
you know what belongs to what because
everything sort of nested in and you
always know where to look for something
alright well in the next tutorial we're
going to be talking about mix-ins which
are sort of like but they're sort of
like variables but you're a little bit
more powerful you can do a lot more with
them and because they encompass a lot
more we'll get into that next time as
always if you have any questions you
know leave a comment or email us
and you know subscribe if you like if
you want to see more
once again this is Scott with all of
Tut's and thanks for watching