Sass Tutorials #1 - How to Install 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 sass and what sass is is
it's a really interesting extension of
css3 and it adds all sorts of cool
features to css3 that will really make
your life a little bit easier in all
sorts of ways so some of the stuff it
adds is it adds variables which are
really important because let's say you
want to give this color blue and you're
using it all over your site and then at
the last second somebody changes that
and so you have to go in all of the
places that you have declared that color
of blue and change them by hand
what's great Bice about sets is you can
have a variable blue and assign it to
whatever value would like and then you
can go and use that all over on your CSS
document and then if you need to change
it you only have to change it in one
spot there's also some really great
functions that go along with variables
that we're gonna get into in the
variables tutorial
there's also nesting which saves you a
ton of time so instead of having to
write CSS long out like you would here
you can nest things inside of other
things and it saves you a ton of typing
and just a ton of time overall mix-ins
are sort of like variables but with
larger groups of CSS you can use mix-ins
to declare you know a whole group of
things and then and then head it to
something later basically allowing you
to reuse code in all sorts of ways and
changing it with variables it's really
powerful is very exciting there's also
selector inheritance so it allows you to
you know reuse CSS properties without
duplicating them it's it's it's very
powerful as well you know sass is just a
all-around great tool to use and I found
it really you know helping you know
write CSS really quickly and it's just
really really great okay so to head to
install sass you need to install Ruby
gems I'm not going to go over and store
rubygems in this tutorial I'll you know
I'll make a separate video for that if
needed if you don't have ruby gems
installed I would you can go to
rubygems.org and then followed the
download and installation instructions
here and this will install ruby gems if
you want to check to see if you have
ruby gems installed open up your
terminal and type gem and then - thee
and it'll give you a version if you have
gems installed if not it will say
command gem not found so I have gems
installed I want to install sass because
I know that I don't have admin
privileges in this account I'm going to
have to sudo or also you know I'd get an
error saying I don't have the privileges
to install this so as you can see at the
top of sass - Lang comm it just says gem
install sass we're going to do sudo gem
install sass it's gonna ask for my
password give with that take a second
here and okay it's going to say
successfully installed says three point
one point four one four and then it's
going to go through an install some
documentation this will just take a
second it might take a little bit longer
on yours I've actually already installed
sass on this computer so I'm not exactly
sure the time difference
however it shouldn't take that long and
as long as you don't see an error it
should be fine alright so this is done
we want to make sure that SAS installed
so we'll do SAS - your V it's going to
say you'll have SAS three point one
point one for brainy Betty which is the
latest release ok so now I'm going to
show you how to use SAS in its most
basic we're not going to get into any
CSS right now but I will show you how to
get SAS running so we're going to change
into my desktop
and if you notice I have a file that's
style dot s CSS and what this is is it's
just a blank document that's style dot s
CSS so when you are writing your sass
the s CSS document is the one that you
will be editing and what sass does is it
converts it into a CSS file that your
browser can read so what we need to tell
SAS to do is we need to tell it to watch
that s CSS file and anytime that there's
a change made and needs to update the
style that CSS actually when you tell it
to watch the first time it's going to
create that CSS file so I'm just gonna
get rid of the one I have here already
so if you notice at the top of Ashe -
Lang comm it gives you your command
right here so we can do sass - - watch
style dot s CSS so this is a file that
you're watching : style dot CSS and this
is the file that it's going to be
changing it into so when you hit enter
it's going to say sass is watching for
changes press ctrl C to stop and it says
overwrite style that's CSS so you can
see this file was just created on my
desktop so in my style that s CSS file
I'm going to show you how when you save
it it updates automatically so we're
gonna add just a basic class here this
is just normal CSS we're gonna do body
background and give it back on a black
typing okay so watch when we hit save
unless it automatically says change
detective to style dot s CSS overwrite
style.css and now if we go to our CSS
document it'll say body background black
of course because we didn't have any
actual sass there's going to be no
difference but as you can see it
successfully converted your S CSS file
into a CSS file
so that's pretty much it for the first
lesson in the next ones I'm going to be
showing you some of assesses more
powerful features and some of the great
things you can do with variables and
nesting all sorts of stuff thanks for
watching again this is Scott with level
up tuts and see you in the next one but