Sass Tutorials #28 - Selector Functions & Sass 3.4 Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with level
up Hut's and today I'm gonna show you
some new features that came in the
latest version of sass now sass just
recently updated to version 3.4 and that
brings something called selector
functions now selector functions are
super easy way to save you from
rewriting code so in this video we're
going to show you how to upgrade your
sass to 3.4 and then we're going to show
you how to use selector functions so
let's get into that now so the first
thing we want to do is update our sass
if you haven't done that already we can
just do that simply by doing gem install
sass using sudo if needed so I'm gonna
type sudo gem install sass this is going
to get the latest version as of right
now it's three point four and three
point four is the version that we're
going to be talking about for this video
so as you can see it's installed sass
3.4 successfully and we're ready to get
started using the new features now one
of these new features is called a
selector functions and a selector
functions allow you to perform a
functions on selectors just like the
name implies now let's go ahead and
write a selector function what kind of
functions are there in this latest
version of sass
well the selector functions that come
our selector nest selector append
selector extend selector replace unify
is super selector it's simple selectors
and selector parse the complete list of
this is in the sass documentation and
the change log for the most recent
version I'll leave a link to that in the
video description as well as to a blog
post by blog that's a slang dot-com
where you can see what they have to say
about these new selector functions so
what's the syntax for a selector
function well it's just like any other
function incest you just have the name
of the function so select door and then
- append for example selector append it
concatenates each selector without a
space so basically will allow you to
create combined selectors from several
selectors so let's see an example of
that their basic example is to take
something like dot foo comma dot bar so
you have the foo and bar class and then
outside of the quotes we're gonna put
another comma and then within quotes
we're gonna put - suffix now this is the
example that they have on sass lang calm
now if we simply say something like this
it's not really going to do anything in
fact we're going to get an error out in
our compilation but we want to do is
then help put this as a string now you
know you can do that in sass by having
an end curly bracket and a start curly
bracket and then a pound sign now what
we can do to build on top of this is
have a set of curly brackets just like
we'd be using in a normal selector and
we can give this something like color
red okay so now you might be curious to
what this actually outputs so let's
check out our CSS and you can see here
this outputs foo suffix comma bar suffix
and it's giving both of those the color
of red so what's the append doing let's
take a look at our sass once again we
can see that it's taking foo and then
applying suffix to it and then it's
taking bar and also applying suffix to
it if we were to have inside of the
string more we could just say hello
let's come back to our CSS you can see
that is also getting the suffix there
now that's what append does now there's
an another sass function selector
function called nest and now nest is
going to do the exact same thing as
append however it's not going to connect
your suffix with your prefix here so if
we change us to selector neck nest like
that check out our CSS you can see we
now have foo suffix bar suffix hello
suffix color red so maybe you would use
this if you had something like you
wanted all of the buttons within a
certain set of dibs
so if we had a class of dot BTN here you
would see that now every single button
within foo bar and hello is going to
have the color of red now what are some
of these other functions well we also
have something like unify which is
actually going to take two strings and
combine them so if we were going to have
this to be unify and save this let's
check out what we get here you can see
we get foo button bar button and hello
button so all of these three buttons if
it's the foo button bar button or hello
button is going to be getting the color
red what it's doing is as taking foo and
unifying it with button it's taking bar
and unifying with button as well as
hello and unifying it with button now
what were to happen if we were for some
reason to have far as a class in
addition to BTN would an output bar
button bar let's check out our CSS as
you can see it's smart enough we have
foo button bar we have hello button bar
however when we have two strings that
are the exact same such as bar and bar
it only gives us bar button BTN so unify
is really smart because it doesn't
actually it's not going to reproduce
something unnecessarily so I would
highly recommend going to sass lang I'll
have the link in the description here
and you can take a look at the list of
all of the new selector functions and
just try them out now these things are
so new that their full potential might
not even be unlocked by the sass
community yet so what you want to do is
you want to take your new knowledge of
selector functions and just start
playing around with them get creative
and see what you can come up with if you
come up with great new techniques share
them with the community I'm sure
everybody would love to see what new
cool things you can do is select your
functions so check it out as always this
is Scott with level up tuts you can
reach us on Twitter or Facebook pretty
much anywhere we love to hear from you
thanks for watching and I'll see you in
the next one bye