hey everybody welcome back to css3 in 30
days today is day number 12 and we are
going to be playing around with
something called css variables there's
also you can call it custom properties
uh but that's not as exciting css
variables especially for uh developers
and designers out there who are familiar
with variables in languages like php or
jquery
or even using css preprocessor languages
like sas and less and scss where you use
variables it really extends the
functionality of css or whatever
programming language you're using that
are using the variables so in this case
we're just going to be using plain
vanilla css3 but you do have access to
something called custom properties or
aka css variables so jump over here in
our browser we're just going to be
coding a couple simple boxes nothing
crazy but the neat thing about this
everything we're doing here from the
measurements to the colors are are used
and created or styled rather via custom
properties or css variables so why don't
we just jump in and get started so here
in my code editor i'm back with atom
hopefully it behaves well
we have day number 12 css variables go
ahead and download that folder
open it up in your code editor
and then let's jump right back in
here in the index you're just going to
see the usual
that we've been using these past 12 days
and just down here you're gonna see in
the section just two divs one with the
class of box and one with the class of
box
box two
and of course you can go down to the
final result and check out uh how that's
coded up in the final css there are a
lot of comments and notes in here to
help you understand why we are doing
certain things explaining the custom
properties and everything like that but
what we're going to concern ourselves
with is this file sandbox.css as usual
and we're going to get
started
let's start off by
selecting the sandbox class and within
there what we're going to do
is declare
three different variables or custom
properties
and the way this works with custom
properties in css
is the when you define that specific
custom property within a selector it is
its scope is that selector so if you
wanted the
these variables to be accessible across
the entire website and all styles you
would use a selector
like
body
or something like
root is another selector the root
element of a tree representing the
document you can use those selectors if
you want these specific
variables to be accessible throughout
the entire document something like a
color or a font size or maybe branding
specifically branding colors but we're
just going to use
in this case sandbox so all of the
variables are
its scope is this selector so the
variables won't work if i am trying to
use those variables on
elements outside of sandbox
so this is how you start a selector
sorry this is how you start a variable
you start out with two dashes and then
you name the variable so i'm going to
say primary dash color
and i'm going to say orange red
another variable here
i'm going to say secondary
color dash color that is
hot pink
and then double dash base dash
measurement
20 pixels so three variables it's not
going to do anything if i save this and
check it out in the browser it's not
going to actually do anything because
those aren't actual styles they're just
variables now let's go back down here
and let's access the variable
like so so i'm going to select
the sandbox
and then
box so these are both of the boxes
and let's just first of all
text align center
and now what we're going to do
is let's actually add one more variable
within sandbox box so now this variable
is only accessible within this
particular scope within box within
sandbox so you can't actually use it
outside of this selector
or these elements rather
so i'm going to say double dash
text color it's going to be f3
f3 f3
okay
now here's how we access
the variable so i'm going to say
color
and we have to open it up with var
and then opening and closing parentheses
and then a semicolon of course and then
all you do here is just call the name of
the variable that you
created
double dash
and text color text dash color now
if i
save that and then go over to the
browser you're going to see that you
cannot see the text and that's because
it is the same color as the background
in this case or pretty close
and it's centered
so we know that that variable is working
let's continue
and style the background and we're going
to say var open closing variable or var
double dash primary dash color and let's
go ahead and say margin
and whoops there we go
and i'm going to say var
this one's going to be base dash
measurement which as we know is 20
pixels so go ahead and save that check
it out in the browser now it's doing
something the background is that primary
color which is orange red and the base
measurement is of margin is 20 pixels it
is working so this is nice
so now one other cool thing that you can
do
with the
measurements is you can actually do math
by using the calc function so let me
show you how to do that height
we're going to say var
and then base measurement das dash
measurement but we don't want to just
leave it there let's wrap this in calc
and then semicolon and we're going to
calculate this but then we actually have
to perform a calculation so outside of
this
so this is the first argument here and
there's one more
times we're going to say times 10 so
we're going to calculate the var base
measurement or the base measurement
times 10
and that should equal excuse me 200
pixels
and then i'm going to copy that paste it
i'm going to change this to width i want
it to be the same because it is a box
and then i want the line height
to in fact be the same as well
now if i save that i should have perfect
boxes head over to the browser there we
go all using the variables and the css
here let's check it out
what shows up so we've got box and then
if we look at the styles
it actually is showing up as var text
color primary color measurement it's
actually
showing those variables it's not showing
the final calculated number in there at
least in this developer tools there and
so i find that pretty interesting um
now let's do let's go back to our code
editor and we're gonna do one final
thing here if you scroll down
beyond that
we're gonna say
sandbox
and then box two we wanna make that
color of box 2 different background
we've already set up a variable for it
var double dash secondary
dash color save that in the browser
we've got our orange red box number one
and our hot pink box number two the
colors and the measurements
are calculated and created using
custom
properties also known as css variables
that is exciting i hope that shed some
light and some insight on some cool
things that you could do with css
variables instead of having to go in and
create uh you know install preprocessors
and different uh css languages like sas
and less for certain projects that might
not be that necessary or too much uh
work maybe just a simple landing page
and you just want to get something up
quickly you can use css variables make
sure you check at the bottom of this
page here you can see
the css3 styles how compatible they are
with major browsers if you click that
it'll take you to
a page called can i use and then you can
type in something like
css variables custom properties it
permits the declaration and usage of
cascading variables and style sheets
and you can see here how compatible they
are so with ie11 it's not supported uh
oh well
and edge
it looks like it's partial support and
full support here on 16 firefox fully
supported chrome fully supported safari
opera ios safari fully supported opera
mini not so much android 56 yes uh 4.4
no
and chrome for android so we're pretty
darn
um
covered here so that's pretty neat uh
you can see up here the percentage here
so the global percentage is about 77.9
percent um
compatible so you can rest assured that
you're pretty safe using css variables
also known as custom properties i hope
this lesson was exciting for you and
gave you some ideas
and quick hot tip if you want to get
access to all of these 30 lessons all at
once rather than waiting day by day
maybe you're ready to take on a
challenge and get everything all at once
all you got to do is pay five bucks you
get all the 30 days plus
a full 30 day membership to code college
where you get access to all of my coding
courses ever
and just for five bucks and then after
that 30 days if you want to stay then
it's just 34 a month afterwards you can
cancel at any time
basically it's a subscription-based
model think netflix for coding tutorials
and if you don't want to keep going then
all you got to do is cancel before that
30-day window is up so once again all
you got to do is head to brad hussey.ca
css3 there should be a link up here on
the screen go ahead and go there you'll
get the first month membership of code
college for five bucks that'll get you
all the 30 days of these lessons plus
every coding course i've ever made
and you can have a heyday there and if
you want to stick around then it's just
34 bucks a month hope to see you in
there if not i'll see you tomorrow for
day number 13. bye now