Sass Tutorials #7 - @Import & Parent Reference Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

yo what's up this is Scott Olinsky with
level up Tut's and today we're going to
be leveling up your sass basic skills
even further we got a couple of small
things to go over a couple of you know
small easy features that can make your
life a little bit easier keep your code
a little bit more organized I'm actually
sort of surprised I haven't gone over
these already how because they are sort
of you know in the realm of the the key
basics so the first of which is we're
going to go over import and what import
does it allows you to reference a whole
nother style sheet and then when you
compile your your sass document it
actually brings in those files and puts
it into a one CSS file so what this
could be useful you know maybe you want
to keep your mix ins in a completely
separate sass file or if you want to
keep um let's say you want to keep your
your media queries and another sass file
as well it can you know basically if
keeping your code organized or keeping
your sass code organized it's pretty
much up to you how you want to do it for
this demonstration I'm just going to use
the style s CSS file that we used from
the basics tutorials previously so the
first step is is that you have to name
your ear file correctly so because I
want to keep this file intact for other
reasons I'm just going to duplicate it
and what I'm going to name this is is
the first character is underscore so
underscore style s CSS alright so then
that your top of your sass document here
we're just going to do import so it's
the add symbol then import and then
within quotations we're going to write
the name of the file so it's just style
and then end that out with the semicolon
and we're going to save this so you can
see sass overrides fine
and now if we go into our CSS file you
can see all of the Styles come in
from this style s CSS file so that's
pretty awesome um you know it could save
you a lot of you know clutter and you're
in your SAS document so they don't end
up having you know something like this
this mixin that you know it's very
functional but takes up a lot of space
so so that's imports the next thing
we're going to cover is parent reference
so basically this is useful for things
like anchor tags or you know hover
States or things like that so it goes
along sort of with nesting so inside of
our circle we're going to make our
circle circles background color change
on hover so within these brackets we're
going to put an ampersand and then we're
going to do a colon and then hover and
then now within these brackets we can
say background black save that and now
if we refresh this and now you can see
it grab the styles from our import and
now if I hover over the circle you can
see it has gotten the hover state of
black so this just you know saves you a
little bit time you don't have to write
and uh then you don't have to go down
here and do circle hover so yeah it's
just another quick little shortcut that
is makes your life a little bit easier
for all right well that's importing and
parent reference if you have any
questions please leave a comment or let
us know you can follow us on Twitter at
level up Tut's and subscribe to our
channel if you like the videos we're
going to keep more coming lots more
coming all right thanks bye