Sass Tutorials #20 - @Content - Better Media Queries in Sass Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with level
Tut's and today I'm going to be talking
about a new feature in sass and it's the
at content in what the at content allows
you to do is it allows you to use a
mixin that accepts a block of content so
typically you're used to writing mix-ins
that you're just you know placing
wherever you'd like
but what if you'd like to place code up
inside of a mixin well this is really
useful for something like media queries
and so I'm going to do an example right
now using media queries and showing you
how awesome add content is okay so the
first thing we need to do is create our
mixin and this is just going to be I'm
going to do the way we normally do a
mixin so add mixin and then the name of
our mixin which I'll just call phone
okay and we're going to wrap this in
brackets brackets just like normally
okay and then now we're going to do some
different stuff I'm going to do a media
query the same way you would normally do
a media query media and then
electro string disco down so you can
actually see it okay so we have our
media query here right the media is only
the screen size our only screen and max
with the 480 pixels okay and inside here
we're going to put an ad content so
right here we're going to put ad content
okay and so this is the new bit right
here this Edie to drop anything you want
inside of this mixin and it allows you
to use this media query so let's do an
example let's say we're working with in
main div on our site and inside here we
have the we have a class called header
right so in our header we want to do
let's just say width of 80% and then a
margin of 0 and auto ok height of 200
pixels so this is our header but let's
say for the mobile version of the site
we actually want the header to have a
width of a hundred percent well now
instead of having to write your media
queries at the end or something like
that you can do it right in here in a
way it really fits nicely into your CSS
and really keeps things organized I
think so we can do @include and then
just the name of our mixin so phone the
same way we'd normally do a mix in here
you're including your mix in but then
we'll do a bracket in the side of our
brackets we're going to put dot header
which is the same class we had before
and instead of our header we're going to
say the width is 100% so now in normal
circumstance for everything except for a
screen with the max width the 480 your
header is going to be 80% but now under
the circumstance that your screen is
less than 480 pixels it's going to use
this header 100% so let's save this
and let's click over here if we can see
exactly what it's doing okay
let's actually space this out a little
bit so you can see okay so we have our
normal main header our main header is
getting width of 80 whatever just like
we would expect and then it writes out
our media query and instead of our media
query we have our main header width is
equal to 100% okay if you're used to
working with media queries I think you
will know how awesome this is
I personally really like the
organization of it it keeps this stuff
really close together now if I want to
adjust this header I don't have to go
looking on another stylesheet or at the
bottom or something like that it's just
right here and it's really efficient so
this is the app content you can drop a
block of content whatever you put in
here is going to get placed inside of
this mixin and that will then go inside
of your CSS so that's the the process of
it this goes into this and then this
comes right back into here and then you
have awesome code and weaves your media
queries right in and I'm sure there's
all sorts of other great uses that any
cup anybody can find just keep playing
around with it but yeah so this is at
content I hope you really like it check
it out it's something that I've really
been enjoying in my sass lately so one
quick thing that I should mention is
that the content passed to a mixin is
evaluated in the scope of where the
block is defined not the scope of the
mixin so to show that an example if we
have something let's have a variable and
we want to say this is the width and we
define this width as being 50% so this
is accepting a variable however we're
going to give it a default so we can say
the width and then the default is 80%
okay
so if we then were to pass this width
down here and we were to try to pass
this the variable and say width
it's not going to use this 80% it's
going to use the global 50% so let's
save this and you can see exactly what
I'm talking about okay you can see that
it's gotten the 50% and not the 80% here
as defined in the mixin so what that
means is is that variables that are
defined in the mix in itself cannot be
used within these this past block of
styles the at content you can't use
variables from that are defined in the
mixin in this add content ok so just be
aware of that play around like I said
play around with it and see if you can
like break it or just see what you can
do with it okay cool so as always if you
have any questions or comments please
leave a comment the video is up at level
up touch at Twitter and know just let us
know what you're thinking
once again this is Scott and thanks for
watching