Sass Tutorials #21 - Extending Sass and Writing a Config file Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with level
of Tut's and today I'm going to talk
about extending sass and come best in
particular so we have sass and compass
which are two great tools says does the
compiling at the features compass is a
collection of mix ins and tools that
helps us create sites easier
well compass isn't really the only
external library out there that can help
us with sass there's actually a lot of
them and there's more all the time
in fact there's grit frameworks like
Susie and singularity which we'll be
covering both of there's things like the
tool kit which offers like a clear fix
mix in and just extra extra little tools
here and there we have things like
globbing which basically makes partials
a way cooler because you don't have to
import every single partial separately
you can have all sorts of them you can
just have say hey look in a file and
pull in as many as you can there's a lot
of stuff and it's great it will
completely change how you use sass and
your workflow and I'm super excited so
today what we're going to do is get
started with sass and extending sass and
to do so we're actually going to create
our own config dot RB file and you could
have a config dot RB file generated for
you in the methods that we outlined in
previous videos way back a couple of
years last year or so and but I think
it's important to understand what goes
in a config dot RB file and how it can
help us so if we want to use an
extension or anything like that we can
put it in this config RB file and we'll
be doing that certainly in the next
lesson we're going to be installing
globbing and then moving on to break
point the singularity and break point
singularity being the grid framework and
break point being awesome media query
mix-ins for sass so we're going to go
ahead and I'm going to right click on my
project here which is by the way just a
normal
Gmail five boilerplate project and
nothing crazy done to it I'm going to
create a new file and I'm just going to
save it as config dot RB nothing special
this is a ruby file and you don't have
to know Ruby to write this file so we
want to say let's just go down a few
lines because I'm going to put my
required statements above this later
so I can say project underscore type and
then colon or equals colon stand
underscore alone and now we're going to
have basically the values that we
configured within code kit or things
like that before and just tell it where
our paths are so our HTTP path isn't
anything special so we just have equals
and then in quotes a forward slash we
have our SAS underscore directory is
going to be just SAS in fact you can see
it over here my sublime is just the SAS
folder and we also have our CSS
directory and now this is where our CSS
is going to compile into and this is
just CSS we already have this directory
created now we have our images
underscore dir so we have our images are
just an IMG folder and our fonts
underscore are in a fonts folder
although that doesn't quit exists so let
me make one new folder fonts okay so as
you can see this is going you know it's
it's pretty basic here and there's
nothing scary so the moment that you
learn to write these things yourself
like is configure our be the more you'll
maybe understand a little bit much going
on it's the having an application do it
for you but if you understand it you
don't care you can always you know do it
every like in whatever works for you so
Java scripts underscore directory
and this is just going to be in j/s
notice how its JavaScript's underscore
directory cool and now we can get into
configurating the output a little bit we
can say line comments we would not like
those so we're going to say under their
equal to false and actually I'm sorry
that's false without any quotes so just
like that preferred syntax this is going
to be what types of files we have we
have s CSS files so as opposed to SAS s
files if you don't know the difference
check out SAS comm they go over what the
difference is their preferred syntax is
equal to and then we have : s CSS we
have output style and again we covered
output styles in the past however this
is just setting it up so when we say
Compass watch we don't have to tell it
the output style and we're going to say
this is expanded because this is in
production or development right now and
relative underscore assets even though
we're not really going to be using any
of these we're going to say true ok
perfect so we now have our config dot RB
file now to confirm this let's just say
body BG a background oh this is set to
be a plain text file we have no code
coloring here but that's alright I will
install the sass sublime text code
coloring plug-in in the break between
these videos so we save this file here
now let's start our compass watch and
now I'm going to change into my sites
directory so I'm going to say CD sites
can and then I have this site located
and level up sass like that we have our
site here and now we can say compass uh
and then we can say watch
now it looks like it's watching our file
it compiled it to CSS dot on the folder
CSS come in here we have two files here
let me actually I'm going to delete this
main one but here we have our style that
CSS compiled for us as you can see our
config that our B file is working as we
wanted it to so in the next video we're
going to show you how you can require
new modules and then we can install them
and it's going to be perfect so as
always this is Scott with level of HUD's
if you have any questions or comments
please hit us up at order Facebook level
up touch form anywhere ask us some
questions we're going to be getting into
some really cool new sass stuff in the
next few videos so thanks for watching
right