Sass Tutorials #30 - Juice; Mixins for Life Part 2 Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey whats up this is scott with level of
tutorials and today we're going to
continue talking about juice which we
showed you in the last video just
highlighting a few more of the mix-ins
and features that come with juice so
check it out we're going to get into
that now so in the last video we showed
you some mix ins and then this video
we're also going to show you some of
these mix-ins placeholders and functions
now I'm just going to highlight a couple
of mix-ins I really like here first
before we get into some of the other
stuff first off I'd really like this
hover or mixin allows you to find your
property and your hover to property in
the same exact line so in our code here
we have this anchor tag and I'm actually
going to define the hover states in
using this mix in so let's get rid of
some of this stuff and as you can see
the mixin is hover a so we can say I
have to include hover now hover takes
some options first option of which is
going to be your property that you're
changing so we're going to be changing
the color and we're going to first put
in the value that we want it to be
originally so let's say we want to be
blue and then after we hover over we
want it to be dis disgusting right so we
have this really ugly color change going
on here but it should make it painfully
obvious what this is doing and if you
want to check out our CSS let's go to
main dot CSS and we'll scroll down here
what you can see is that it outputs
anchor and then anchor hover color red
so coming back to our document as you'd
expect these ugly blue links are going
to change red when you hover over them
now this works for all types of
properties in fact we could do something
like let's make another line and say
hover again but this time let's actually
take care of our text decoration so the
property we can pass in is text
decoration spelled correctly and then
the two properties will be none and then
underline
okay if we save this come back to our
page we can see that even though it is a
little small here when we're hovering
over these they are getting the text
decoration underlined when hover so this
is a nice little mix in that basically
prevents you from having to do things
like at hover and then type in your
hover states it just cleans up your code
just sort of like everything within this
package of juice mix-ins another mixing
I really like that sort of
unconventional or different is this
responsive Nixon now this responsive
mixin allows you to write responsive
code without having to type out
breakpoints now as you can see that it
takes a property like our last one and
then it takes values but it doesn't take
any break points well that's because
it's using the built-in break points for
full medium and small if these values
aren't fitting for you you can always
change them and override them using just
by overriding the value or perhaps even
just modifying them in the in the Jews
file but i would say probably just
override them by retyping them in your
main file so let's go ahead and check
this out and use this in the same
situation that we used our BP mixin up
here to change the body color so instead
of having a background statement and
then a BP mixin we can just use this ad
include responsive for the background
color we wanted to go from white to a
gray and then to a little bit darker
gray so if we save this let's come to
our page and you can see at its largest
view it's white the next largest is this
lighter gray and then we go one more and
we're going to get this darker gray it's
not super dark gray bits still a bit
lighter let's check out the CSS that
this is actually outputting because I
think it's really interesting that we
have one line here and then in our CSS
we're actually getting our media queries
being output just like this
so this to me is a really elegant
solution for a quick and easy maybe like
a one property change for something
we're not changing a lot of stuff at a
breakpoint but like this situation where
maybe you're just changing the
background color or maybe a width of
something is changing at different
different uh break points and that's it
but this to me is just really super nice
and it's a one liner and it's really
super powerful ok so let's come back to
juice and let's check out some of these
at placeholders now place holders are
pretty much just extend so for this
we're extending clear fix and it's a
simple clear fix it outputs where you'd
expect for clearfix and this is really
no different than most clear fix mix-ins
or anything of that nature it's just
nice and easy now next we have high text
which you just add extend print a
percent hide text and it's going to make
your font size zero color transparent
tech show none so it's going to keep it
there but hide it extend center or so in
it centers an element horizontally and
vertically with position absolute top
50% left fifty percent and then a
translate of negative fifty fifty
vertical center are just does the same
thing behalf of that cover does position
absolute top left 0 with one hundred
percent height one hundred percent that
makes something cover the entire parent
or screen depending on the parent has
positioned relative or something like
that and as you can see it's just nice
little things like that we just the last
one here its center block display block
margin left auto margin right auto so
that will just sent our block item ok
we'll lastly we have these functions and
now these functions are not a ton
different than some of your built-in SAS
functions for instance this tint
function is essentially just adding
black to something so if we say tint
it's going to mix with that color
fifteen percent so let's go ahead and
see how that works here using tint I'm
going to actually change the body color
once more
we're going to say background and that
background is going to be tint and we're
going to tint this white color we're
going to tint it by twenty percent let's
save this I'm sorry tinting is actually
mixing white with the color I probably
forgot that from art school but we can
say 10000 for twenty percent come back
to our page and we're going to have this
lighter grey in fact if we tinted a bit
more seventy percent it just gets
lighter and likewise we have tint we
also have shade which is what I was
thinking before where we mix black with
the color works the exact opposite of
that now strip units is going to remove
any units from a number so let's say we
have five pixels it's giving us five now
let's come to REM calc which is going to
calculate rims based on a base font size
now the standard base font size for
juice is set to be 16 pixels if that is
not your base font size we can modify
that by overriding the value email us at
a base size of 16 pixels a 15 pixel Ram
Calchas giving us point 9375 rims and
likewise M calc is doing the same thing
just calculating m values now let's come
down here and we have some really
interesting functions that I haven't
seen in a lot of other sass mix and
packages this one in particular gives
you a random color so let's go ahead and
check it out what you need is a minimum
value from 0 to 255 a maximum value from
0 to 255 and an alpha value so I'm
actually just going to copy this and
throw it directly into our page here and
once more when you use this as our
background color and so the random color
let's actually change this to be the
lowest is going to be 20 the maximum is
going to be 255 and
we'll have this be non transparent so my
opacity is just going to be set one
check out our page and we have this
crazy orange color we save let's
actually make a modification and save
again come back and we now have this
really super bright ugly green color but
it's nice because it's giving us
something different and I don't
necessarily have a use for this right
now but I think it's a really
interesting idea for a function and I'm
glad that somebody has created this
answer on this in this package ok so
let's come down here and this last one
is just a reverse which reverses a
string now I would love to see a really
cool use of this reverse I personally
can't think of anything off the top of
my head but if you have a really
interesting way that you're using this
free first function please leave a
comment and let me know so we mentioned
several times that if you don't like the
values of something then you can
override them so if you come down here
under settings you can see that these
the variables in your main s CSS file
and you can change their default values
if you'd like says you can override
these variables in your main s CSS file
to change the default values now you
could always just come into this juice
file here and modify these however if
you're keeping this up to date with
something like Bauer when it gets
updated is going to delete that stuff so
a smarter thing would be to simply copy
this variable come in your main s CSS
file or wherever you'd like to define it
and then underneath the juice import you
can always redefine it here and say
maybe the base font size should be 24
pixels for some reason okay so this is a
better approach in that way you're not
you know going to get messed up if that
juice file gets reset or anything like
that and this allows you to configure
your juice settings the way that you're
going to be developing your site cool so
check out juice like I said I'm going to
leave a link to this page in the video
description so you can check it out for
yourself even though it's really new
I've already been playing around with it
on some personal projects and i find i
really like it in fact this mix-ins for
life thing is a pretty nice tagline
because I could find myself using the
is a lot so as always this is scott with
level of tutorials if you have any
questions or comments leave a comment
the video here SF at twitter or facebook
at level up Tut's we love to hear from
you thanks for watching and we'll see
you in the next one bye