Now, in order to understand variables, I want to give you a few examples, and for this, we are going
to open up our previous project, the mobile first project that we did.
And the first of all, I would like to make a copy of the access.
I just created a copy called Hostile Variables That Siestas and also replace it here, variables, style
variables.
You can call whatever you want.
OK, so basically this is the same file, but within here, we're going to create a few variables.
Now this is a cascading style sheets.
So this means anything that is needed down here must be defined up here.
I would suggest defining the variables.
Well, I don't completely at the top or write up or general reset.
I would just create them here, but so we said that babies are defined by hyphen and then give it a
name as a prime color and also a value of red.
Now, if I close this up, well, this isn't valid.
Access variables are defined in the root and what the root is actually open up MDMA if you never use
them.
But of course, you have.
And this is an extremely useful site which will attract the developer was the Mozilla Developer Network.
You should go in here in route and then you will see the explanation.
So the Rouzier says pseudo class matches the root element of a tree representing the document in e-mail,
The Root represents the e-mail text which the e-mail element, uh, element.
And it is identical to the selected element selector element.
So The Selecter e-mail is something that is specifically is higher, so it says that it has the highest
specifically.
And as you can see here, you can just type in route and within the route, you can type in if you want.
And also down here, we have a few examples available.
Now we're going to target the route and so route.
And within here, we can now define our variables, I usually like to also give them a specific comment
which variables are what?
So I'm going to start with I say
main colors
and particular start with the primary color and the secondary colors.
So the type in primary color.
And let's give this a white color, actually.
So with the hexadecimal now you can type in here named colors like white hexadecimal in our Gibby's
and or Jebus and every color, anything that is a very valid Corsetti could type in here.
OK, and let's also create a secondary color,
and this will be hash free, free, free.
OK, so we've got to color setup.
So let's see, where do we have this?
Let me open up our website also.
Where do we have a white colour and this colour, like we could do something like this loop and search
the hash hash FMF and let's see where we have them in our variable.
So let's first of all deselect uh initial stylesheet clicking on the X and we have it in the primary
color shall make this just a bit larger.
OK, so we don't win this one, don't win this one to be modified, deselect this and we have them here
four times.
So where are they also going to pop up?
So they have them here in our button and anchored an icon tag.
So let's see what happens if I.
Replace this with the Bible now in order to use a variable.
We said we need to declare the bar and then within parentheses we're going to use a variable of primary
color, OK?
And hate it still remains the same.
Now, if I were change now my variable color to, let's say, my primary color.
Let's say I'm going to use now a let's say red color, the same named red colors, red, and hey, there
we go.
So you could always say how useful variables are because if I just defined this.
Only by defining this and it has repetitions with through our code, it would spare us a lot of time.
Now, let me turn this back to a hash of F f.
And I'm going to replace it here with typing in primary color,
and as soon as I hit actually click on replace all yes, replace all everywhere where we had our Weitzel
is such a bethwaite.
Our hash of F it was it was replaced with primary color and did the same thing for her free WiFi, so
that darker color.
So we said that the secondary color would be the star color.
So let's go and search for a few of them.
Let's go to to to try this one to replace this one with VAR.
And primary color, the second car, sorry about that.
So the button stays the same.
OK, so we just replace our back on the second deck.
Now let's do this for each hash free, free, free that we have in our code.
So let's search for free, free, free.
OK, I'm going to deselect or initial success.
And our our our our our variable, so we have it all around here, so let's replace it with secondary
color.
I actually also need to type in the VA.
OK, so let's just go back let's go back to FFE.
So right here with this.
Select this one and.
Also, this one pretty aifs, OK?
It does not belong to see it, so let me just hit a few controls, these changes on back to FMF
and let's try this again.
So FFE search for them.
Not here.
We're going to deselect this and we need to use your VAR.
OK, I can't click replace, and there we go now it's replaced all over the place, so we have it here,
primary color and also here and here.
Now it's also replace our secondary colors.
So let's select this.
Free, free, free
to select stylesheet.
And to select the variable, now, we only have this color selected right here.
So let's replace them.
With VAR.
Going to go back and now if I go up here and change it, let's say, to red.
It's safe or oh, and I had that black color.
Now I have the red color.
I cannot let me show you something else that's changed black to black.
If I would go down here where we have all read and let's say I'm going to use here a bar, so this would
be this title right here, and let's say this title should have a variable of title color.
No, it just turned black because this was the initial color of the title and we also didn't define
this favorite color anywhere, but I could type in here now red and see what happens if I hit save our
color terms right now.
There's something called a custom property fall backwards.
So this variable will fall back on this value right here so we can declare variables and then give them
values.
Now, another thing that we can do with variables, we don't just need to use colors.
We can also use them for smaller.
For franchises or farm families or, for example, animation, SP's or transition speed, now I'm going
to go through our code and simplify it a bit, actually make it or actually make it just a bit more
variable.
So let's see, we have, for example.
A font size and step in here, another comment on font sizes.
And this through here, a font s m so small, font size, I say this would be one point to remove.
Then let's create a font and
I'm going to give this to RIM.
And that's on a font excel large font size.
I'm going to give this a two point atrip.
OK, now let's go from code.
Let's say, for example, TA do we have our H2?
We can replace this with the.
Excel.
So instead of this, I'm going to type in here.
You could also, if you have emittance thought you just happen, happened and will show you all of the
variables that you have.
Or you could just type in font and it will show you all the font variables, let's use Excel, it's
automatically placed in a variable.
So let's make this just a bit larger north right here.
We could use we have a bottom, for example, the eye contact, we could use the s.m.
Font and SNL, you can see it actually remains the same, and if I was searching for another one to
see, but we have another font size right here.
So this could be a and the font and the and you could also be an M.D..
OK, as I said, we could also use them for speed.
So let's go to we do have we have these two animations right here.
So our image animates in and also our text animation.
And it could do something like take what you have on it.
Each one is their head of text.
And this has a animation of two seconds.
Let's go up here in our route again and then step in here.
Animations.
OK, let's call this animation speed,
so we said we had two seconds, let's close this up.
And if we go down in our head a text and replace this with animation speed hit, enter and see.
We have the same speed.
Now let's go to our image and get selected.
He was up here, if there's an image also, let's replace this with animation speed.
Now, the cool thing about this is if we now change its policy, five seconds it saved.
It applies to both of them, but just one variable, we can spare a lot of coal, for example, if the
client comes and says, hey, this is just a bit too quick for me or Pittas to too slow for me to say,
OK, let's just change this to two.
How is it now?
Is it better?
Yeah, it's still a bit too quick.
Well let's change it to free then.
It's safe and there we go.
Now imagine if you have this in like ten lines of code.
You also need to and it needs to be the same.
And there is where a variable comes into play.
They also do this for the transition, so we have down here transitions, let's say we create up here
variable of transition.
And it was, I believe, point four seconds.
And we are missing an arm.
Okay, so if we go down here and just replace this tool, it's like going to select one command and
type in transition speed.
And let's go down to our contacts now.
So if I go over my.
Actually, to be in the desktop format.
McKidd, there's a transition.
Now, if I would change the speed now to policy one second again, clients wish the clients, which
is wishes that there should be no whistleblower.
Then hey, there we go.
They could also spare you a huge amount of time if you take this colors and create for yourself a template
with, let's say, the colors, social media colors.
So every time you're going to reuse or create a specific or create some kind of icons and you need to
the Facebook color, the incident color and so forth and so on, I would suggest to do something like
this.
So this one is with color.
Actually going to copy them on let's get a copy of them down here and just going to start replacing
them.
So you need to have a hyphen to let this.
And also they did this.
There's one variable you need to have a hyphen.
I want to let you and hope so.
And also, did you.
Then a Twitter variable and delete you and you and the YouTube variable.
And that it you OK?
So if we have this, I'm going to cut them now and go up in my root and paste them in underneath our
social media collars and down here, I'm just going to use our social media callosal for the Facebook
color.
We're going to use Facebook.
Then Instagram.
Twitter, and we have the last one, YouTube.
There you go.
So let's have a. check them out if this will work.
For you, much to.
The truth is, working with a Facebook, what had just happened?
OK, we have Facebook, you.
There we go.
Yep, so I was just creating calls for the social media icons that use, for example, rules for Snapchat
or Tic-Tac or whatever you knew, you know, that there's a hash color and you still you are going to
use it more often.
I would suggest creating these variables and also creating just this template.
He just created this template and will also have a project coming up where we are going to use a lot
of this.
So I believe that's everything I wanted to show you.
Oh, yeah, one less thing, we could also create this go up here.
And this is just very quick, I just wanted to show you that you could also have shadows of the colors,
let that be a shadow,
and it's creating a shadow very well to say that you will be taxed shadow.
So that we had that we had this one exactly to do, had the texture, so exactly this one and then I'll
copy.
Paste up here.
Close it up and every now go close this one up, they'll need you.
If I would now go back to our shadow where I had a I would just need to type in now the shadow.
And there we go.
You could also change a color, for example, say.
And the changing of the color to all the opacity has changed to eight.
Or we could also change the color for red.
We have no nice red color is awful.
OK, so that's basically it for the very best.
Let's create a project and I think you're going to understand it much better than so soon.
The next one by.