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

hey what's up this is Scott with level
up tuts and today I'm going to bring you
a new sass tutorial on how to use one of
my favorite applications lightly called
live reload live reload is sort of like
code kit and the fact that it can
compile your CoffeeScript your sass your
compass all that stuff but it can also
reload the browser by attaching itself
to any given tab that you have opened so
there's also some really great other
features such as serving a local CSS
file which we'll go over in a later
tutorial when I'll show you how to use
live reload with a interesting workflow
you can get live reload on the Apple App
Store I'm not sure exactly how much it
is I think it's maybe like around 10
bucks or something it's well worth the
money whatever it is and after you have
it downloaded and installed it doesn't
pop open and come down in your dock like
a normal application it actually lives
up here in your toolbar and this is the
logo so if we click on this it's going
to open this window says live reload and
here is what folders were watching so we
wanted to watch this sass folder where
our sites living if we just click the
minus button here we can take and drag
our sass folder back in here and here's
the product project so as you can see
here it says compile Saslow stylus
CoffeeScript in others we're going to
want to check that and then in our
options it sort of sees where your style
sheets live this is of course where
these files are currently living so if
this file in this file exists it's going
to find them and sort of link them up
because it knows what it's doing so if
you want to change these output paths
you're more than welcome to and live
reload will handle that for you but
pretty much you don't need to touch that
unless you want to so it's going to say
you can do a couple things you can put
this script in your page before the body
or you can install the browser extension
I would recommend installing the browser
extension it's a really nice extension
I'm going to grab the chrome one right
here I'm just going to put it in so we
can see this in action I want to add
this okay here's live reload it's now in
your Chrome sleep okay so to get live
reload connected to your page you're
going to have to click this icon right
here and what's going to do is enable
live
reload for this page as you can see
there's a red dot near page and now
there's a red data appear in your
toolbar if you have any problems with
this red dot showing up I would
recommend closing Chrome and closing
live reload and then restarting them
I've found typically after installing it
or installing the extension sometimes it
doesn't always recognize it so if you're
having that problem close both and
reopen them so as you can see now the
live reload is watching our project if
we click this little green dot here it
opens up a terminal like window so let's
say we want to save one of our files let
me just pull this up let's open up our
style that s CSS if I save this let's go
to our live reload you can see that just
like in terminal it's going to say that
it's found some changes and it's made
the changes for us so just in case you
weren't sure if it's compiling or
whatever you can have it up here and
that's you know it's totally cool it
works great here it says one browser
connected zero change or two change is
detected so let's actually make a change
so we can see this live reloading happen
in action okay so let's say we wanted to
change this background to something else
we're just going to change it to blue
just so you can see what's going on we
type blue here and save you'll see that
I don't even have to go back to our web
page to see this background color has
already changed that's because this
browser window is connected to live
reload and when I make this change it
automatically compiles my sass into our
style dot CSS background red you can see
here and refreshes my browser for me
this is all great features this is
really nice and handy especially if
you're working look working locally it
really makes this stuff really nice and
easy you can have this window position
over here in this window position over
here and another monitor you just keep
typing and keep saving and it's going to
keep refreshing your browser so you know
really this this function can save you a
lot of time it could save you a few
keystrokes moving over to your other
application and clicking refresh so I
found live reload is really well worth
the money so that's how you use live
reload to compile your sass it can even
compile compass CoffeeScript
and a few others I think so check out
live reload you can go there website
let's see what it is live reload just
live reload calm and you can see from
there it you know it's really great
application works very well so check it
out let me know what you think if you
have any questions or comments you know
as always leave a comment it is a bit
Twitter or level up tuts let us know
what you're thinking
once again this is Scott Olinsky with
LevelUp Tut's and thanks for watching
but