Sass Tutorials #19 - Placeholder Selectors Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with level
up tubs and today I'm bringing you your
19th SAS tutorial and I'm gonna be
talking about placeholder selectors
which is a new feature for sess 3.1
point there are three point two point
one so if you are not on 3.2.1 please
watch the previous video get up to date
and then come back to this video
okay so placeholder selectors what they
are it's it's sort of like a good way to
look at it sort of like mix-ins right
but instead of copying that code and
placing it into your CSS like a mixin
does your mix-ins pretty much just a
placeholder where it's going to drop
that code in this is sort of works a
little differently and what it's going
to do is you define a chunk of code and
then you extend that code into a class
and what it really ends up doing is
adding that class to the block of code
instead of adding the code to the class
okay so that might time a little bit
complicated but when you see an action
it's really nice and it's really cool so
it might be a cool alternative if you're
looking to do something like this and
I'm really happy it's in sass okay so
first off we're just going to use an
idea of main let's say this is like the
main div on our site alright and we're
gonna fill this with the normal stuff
let's use color white and we do
background color of blue and then we can
just do like a font size 14 pixels
okay so just you know pretty standard
okay so we have it our code here you can
say it's you know pretty normal CSS so
let's say we know where we don't know
exactly what we're gonna do with this
code but we know we're gonna use it on
dibs and not the main container we're
gonna use this in something within the
main container okay so we need to have a
div and then what we're going to use is
the % and then we're going to use a
variable name so this will just be will
save it as blue okay so let's save this
and now if we come over here you notice
it's disappeared that's because it's now
true
this sort of like a mixin right let's
let's actually apply it to something and
see what happens we're gonna want this
to be applied to any divs within main
that have a class of sign okay we're
going to do dot sign and then inside of
sign all we're going to put is at extend
and then the name of the variable we had
before which was percent
Ballu and then we need to finish it off
with semicolon and we'll save this and
now let's check out exactly what's
happening in our CSS okay so as you can
see here now it's actually added some
code it's given that any div with the
class of sign a color of white and all
this stuff right well we can even get
rid of as div whatever we'll just hit
the percent blue there and now it's
gonna find anything at all with the
class sign that it and give it this
characteristics and that's pretty cool
what let's say later down the line we're
writing some code and we also want we
also want these divs that are called box
they're just called box and we also want
them to have those classes - are those
item this properties so let's do add
extend again and then we're also give
the percent blue and now let's click
over and as you can see what it didn't
do is have another idea of main class of
box and then repeat all this code it's
just separated these by a comma add them
together if we were doing a mixin it
would actually repeat that block of code
so this is really great for this don't
repeat yourself and it works really well
so it's one of those things where it
keeps your code a little bit cleaner you
can do it a little bit differently if
this is how you are going to write your
CSS in the first place use this
technique instead of writing a mixin and
your CSS is going to be a little bit
cleaner or more like you would have
intended for it to be in the first place
so to drive this point home I'm actually
going to let's delete this idea of main
we'll save this ok now let's click over
here and now it just gives anything with
the the class of sign or the class of
box all these things okay so look at
this we have our block of code and
repeating their back of code were just
assigning which classes get that block
of code pretty cool okay so these are
placeholder selectors incest 3.2.1 if
you have any questions or comments
please leave a comment the video here
just set that level up tux on Twitter
let us know what you're thinking
once again this is Scott and thanks for
watching